anglarjs 动态数据绑定:
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
anflar 指令:加在html标签上
常用的指令:
1.ng-app=""指定DOM元素受anglar js影响的作用域
2.ng-init="变量=‘值’;变量=‘值’”指令初始化应用程序数据
3.ng-model 指令把元素值(比如输入域的值)绑定到应用程序
MVC:(mdel:数据 view:视图 controller:控制器)
控制器做数据业务逻辑:(创建数据 数据增加 数据删除 数据查询)
anglar 的特性:
表达式:{{}}需要输出anglar数据变量都可以使用表达式完成
AngularJS 表达式写在双大括号内:{{}}
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量
angular script代码:
<script>
//模块
/*var gaoynapp=angular.Module("myApp",[]);//myapp相当于name*/
var gaoynapp= angular.module("myApp",[]);//name==> myApp
//控制器
gaoynapp.controller("ctrlDemo",function($scope){// $scope angular内置对象
$scope.sex="男";
//创建数组
//$scope.stus=[{name:'张三',age:15,sex:'男'},{name:'李四',age:20,sex:'女'}];
$scope.stus=[]
//点击添加按钮进行添加====添加到数组stu
$scope.save = function(){
$scope.stus.push({name:$scope.name,age:$scope.age,sex:$scope.sex})
}
});
</script>
html代码:
<body ng-app="myApp" ng-controller="ctrlDemo">
<form>
姓名:<input ng-model="name" /><br />
年龄:<input ng-model="age" /><br />
性别:<input type="radio" ng-model="sex" value="男" />男
<input type="radio" ng-model="sex" value="女" />女<br />
<input type="button" value="添加" ng-click="save()" />
</form>
<table border="1px" style="width: 400px;">
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr ng-repeat="s in stus">
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.sex}}</td>
</tr>
</table>
</body>