基础知识
1. 模板
首先构建模板，然后才能使用模板
<script type="text/ng-template" id="tplbase"> 姓名：{{name}},<br/>年龄：{{age}}</script><div ng-include src="tplbase" ng-controller="myController"></div><script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.name='zhangsan'; $scope.age='18'; }])</script>
2. ng-repeat
包含以下几种专有变量：
- $first：是否首条
- $last：是否尾条
- $middle：是否中间条，除了first和last以外都是middle
- $index：索引号，从0开始
<dic ng-controller='myController'> <ul> <li> <span>index</span> <span>姓名</span> <span>first?</span> <span>last?</span> <span>middle?</span> </li> <li ng-repeat='stu in data'> <span>{{$index+1}}</span> <span>{{stu.name}}</span> <span>{{$first?'是':'否'}}</span> <span>{{$last?'是':'否'}}</span> <span>{{$middle?'是':'否'}}</span> </li> </ul></div><script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.data=[ {name:'wanger'}, {name:'zhangsan'}, {name:'lisi'}, {name:'wangwu'}, ]; }])</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
3. 元素样式ng-class
以下几种方法：
(1) 控制器中：$scope.red='red'; 调用：<div class='{{red}}'></div> 虽然这种方法较为简单，但并不推荐(2) 控制器中：$scope.blnfocus='red'; 调用：<div ng-class="{true:'red',false:'green'}[blnfocus]"></div> 当blnfocus值为true时，添加red，否则添加green 这种方法只能设置两种可选择的样式名称，并且注意{}[]顺序不可颠倒(3) 控制器中：$scope.a=false; $scope.b=true; 调用：<div ng-class="{'red':a,'green':b}"></div> red和green为key值，a和b为value，当value值为true时，添加相应key，这种方法可实现添加多种CSS样式
另外，除了ng-class之外，还有ng-class-odd和ng-class-even，如果当前是基数或者偶数项，则显示对应样式
4. 控制元素的隐藏于显示状态 (ng-show ng-hide ng-switch)
<div ng-controller="myController"> <div ng-show={{isShow}}>Show</div> <div ng-hide={isHide}>Hide</div> <ul ng-switch on={{switch}}> <li ng-switch-when='1'>1</li> <li ng-switch-when='2'>2</li> <li ng-switch-default>default</li> </ul> </div> <script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.isShow=true; $scope.isHide=false; $scope.switch=3; }]) </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
isShow为true时显示ng-show所在的项，isHide为false时显示ng-hide所在的项， 因为控制器中$scope.switch=3,页面中ng-switch-when都不符合，所以显示最后ng-switch-default所在的项。
5. 模板中的表单控件
angular自带的表单基本验证功能：
- $pristine: 这个单词的意思是纯朴的、原始的，表示表单或控件内容是否没有输入过
- $dirty: 表示表单或控件内容是否已经输入过，与上面的正好相反
- $valid: 表示表单或控件内容是否已经验证通过
- $invalid: 表示表单或控件内容是否未通过验证，与上面的正好相反
- $error: 表示表单或控件内容验证出错时的错误提示信息
<form name='temp_form' ng-submit='save()' ng-controller='myController'> <input type="text" value="{{temp_form.$pristine?'表单未修改':'表单已经被修改过了'}}"> <div> <input type="text" name='t_name' ng-model='name' required /> <span ng-show='temp_form.t_name.$error.required'> 姓名不能为空！ </span> </div> <div> <input type="email" name='t_email' ng-model='email' required /> <span ng-show='temp_form.t_email.$error.required'> 邮件不能为空！ </span> <span ng-show='temp_form.t_email.$error.email'> 邮件格式不正确！ </span> </div> <input type="submit" value="提交" ng-disabled="temp_form.$invalid" /> </form> <script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.save=function(){ console.log('提交成功！'); } }]); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
当最开始打开页面，不修改表单是，第一个input显示’表单未修改’，当在表单中输入值后，将显示’表单已经被修改过了’。
当name输入框没有输入时，显示’姓名不能为空！’。
当emial输入框没有输入时，显示’邮件不能为空！’,当emial输入框中的内容不符合邮件地址基本格式时，显示’邮件格式不正确！’。
当所有输入都通过验证后，提交按钮变为可用，点击提交后，控制台输出’提交成功！’。
6. 表单控件中的check &radio$ select数组数据
<form name='temp_form' ng-submit='save()' ng-controller='myController'> <div> <input type="checkbox" ng-model="a" ng-true-value="'同意'" ng-false-value="'不同意'" />同意 </div> <div> <input type="radio" ng-model='b' value='男' /> 男 <input type="radio" ng-model='b' value='女' /> 女 </div> <div>选择的是：{{c}}</div><hr> <div> 学制： <select ng-model='a' ng-options='level for level in a_data' ng-change='a_change(a)'> <option value="">--请选择--</option> </select> <span>{{a_show}}</span> </div> <div> 班级： <select ng-model='b' ng-options='v.id as v.name group by v.grade for v in b_data' ng-change='b_change(b)'> <option value="">--请选择--</option> </select> <span>{{b_show}}</span> </div> <input type="submit" value="提交" /> </form> <script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.a='同意'; $scope.b='男'; $scope.save=function(){ $scope.c=$scope.a+','+$scope.b; } $scope.a_data=['小学','初中','高中']; $scope.b_data=[ {id:'1001',name:'(1)班',grade:'一年级'}, {id:'1002',name:'(2)班',grade:'一年级'}, {id:'2001',name:'(1)班',grade:'二年级'}, {id:'2002',name:'(2)班',grade:'二年级'}, {id:'3001',name:'(1)班',grade:'三年级'}, {id:'3002',name:'(2)班',grade:'三年级'}, ]; $scope.a=''; $scope.b=''; $scope.a_change=function(a){ $scope.a_show='选择的是：'+a; } $scope.b_change=function(b){ $scope.b_show='选择的是：'+b; } }]); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
$scope.a='同意'&$scope.b='男'是用来初始化checkbox&radio 输入框元素的，可用不进行初始化
当勾选checkbox时，$scope.a的值为’同意’，否则为不同意。
注意：ng-true-value和ng-false-value的值若只是一个简单的字符串， 则需要加两层引号包围
班级中的group by 代表通过年级分组。
除此之外，还有一个track by 属性，主要是防止值有重复，angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定，以方便追踪数据。例如：items=['a','a','b'],这样ng-repeat='item in items'就会出错，而用ng-repeat='(key,value) in items track by key'就不会出现错误了，这同样可以防止因为ng-repeat重复而发生错误。
ng-options一般有以下用法：
对于数组：
- label for value in array - select as label for value in array - label group by group for value in array - label disable when disable for value in array - label group by group for value in array track by trackexpr - label disable when disable for value in array track by trackexpr - label for value in array | orderBy:orderexpr track by trackexpr(for including - a filter with track by)
对于对象：
- label for (key , value) in object - select as label for (key ,value) in object - label group by group for (key,value) in object - label disable when disable for (key, value) in object - select as label group by group for(key, value) in object - select as label disable when disable for (key, value) in object
