AngularJS入门-demo
2024-09-26 00:19:31
双向绑定测试:
<body ng-app>
请输入姓名:<input ng-model="myname">
<br>
{{myname}},你好
</body>
这时候AngularJS会自动绑定对象myname,并且在下放的{{myname}}中显示出来
初始化指令:
通过ng-init来初始化对象,使对象有默认的数值:
<body ng-app ng-init="myname='陈大海'">
请输入你的姓名:<input ng-model="myname">
<br>
{{myname}},你好
</body>
此时默认显示出来的内容:
陈大海,你好
控制器:
<script >
//定义一个对象函数
var app =angular.module('myApp',[]);
//定义对象的controller,叫做myController,后方就是controller的内容
app.controller('myController',function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y)
}
});
</script>
调用
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
运算结果:{{add()}}
</body>
也可以用$scope.x=10,设定x默认值为10
事件指令:
<head>
<title>
demo
</title>
<script src="angular.min.js"></script>
<script >
var app =angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.x=10;
$scope.add=function(){
$scope.z=parseInt($scope.x)+parseInt($scope.y); }
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
<button ng-click="add()">运算</button>
运算结果:{{z}}
</body>
创建$scope.z对象和函数,但是并不主动调用函数,当按下ng-click的时候,进行add()的调用,然后主动回显结果
循环:
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.list = [10,20,30,40]
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body
先用$scope创建一个list
在用ng-repeat命令调用该list
循环数组:
app.controller("myController", function($scope) {
$scope.list= [
{name:'张三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
]; });
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr> <tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr> </table>
类似类的调用。
内置服务:$http
<script>
var app = angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$scope.findAll=function(){
$http.get("data.json").success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
data.json
[
{"name":"张三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":67,"yuwen":86}
]
要注意<body ng-init="findAll()"> 要初始化angularJS的函数,即$scope.findAll(),不然http会注入失败。
最新文章
- switch与ifelse的效率问题
- 球谐光照(Spherical Harmonics Lighting)及其应用-实验篇
- 测试Javacript里的checkbox是否被选中的status和checked的替换方法
- 开启事务时mybatis返回主键id
- [LintCode] Ugly Number 丑陋数
- Unity2D多分辨率屏幕适配方案(转载)
- MKCOL not allowed
- regsvr32提示模块加载失败 请确保二进制
- POJ 2749--Building roads(2-SAT)
- java 写的能够响应浏览器请求的 http 服务器
- BZOJ 1217: [HNOI2003]消防局的设立( 贪心 )
- Servlet3.1规范和JSP2.3规范
- centOS 6启动流程
- vm虚拟机中linux无法连接外网?
- LeetCode(61)-Valid Palindrome
- 我眼中的 Nginx(一):Nginx 和位运算
- PHP----------file_get_content获取不到页面信息
- SCOI 2018 划水记
- Java基础——工厂模式
- 检查mono兼容性的工具MOAM
热门文章
- [leetcode]224. Basic Calculator
- python算法之插入排序
- FutureTask原理解析
- 第五篇、Python之迭代器与生成器
- 初探LaTeX
- 两个对象的 hashCode()或equals相同,equals或hashCode不一定相同--《案例演示》
- 无分类编址(CIDR,Class Inter-Domain-Routing)
- android手机旋转方向识别
- 数据仓库系列 - 缓慢渐变维度 (Slowly Changing Dimension) 常见的三种类型及原型设计
- 每日笔记-redis的理解及相关应用