<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <ul ng-init="nums=[1,1,2,2,3,3,4,4,5,5]"> <li ng-repeat="i in nums track by $index"> {{i}}+1={{i+1}} </li> </ul> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { }); </script> </body> </html>
运行结果：
dupes错误说明：
AngularJS does not allow duplicates in a ng-repeat directive. This means if you are trying to do the following, you will get an error.
ng-repeat不允许重复。
<div ng-repeat="row in [1,1,1]"> <div ng-repeat="row in [1,1,1] track by $index">
ng-repeat还是需要一个唯一的key
3.2.5、ng-switch
根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中。
示例代码：
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1" ng-init="color='orangered'"> 请输入颜色：<input ng-model="color" /> <p ng-switch="color" ng-style="{'color':color}"> <span ng-switch-when="red">红色</span> <span ng-switch-when="green">绿色</span> <span ng-switch-when="blue">蓝色</span> <span ng-switch-default>输入错误，请输入red,green,blue</span> </p> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) {}); </script> </body> </html>
运行结果：
3.2.6、ng-value
绑定给定的表达式到input[select]或 input[radio]的值上
<input type="radio" ng-value="'值'" ng-model="radioValue" />{{radioValue}}
示例代码：
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1" ng-init="color='orangered'"> <p> 是否同意： <input type="radio" ng-value="'同意'" ng-model="isAllow" />yes <input type="radio" ng-value="'不同意'" ng-model="isAllow" />no <p> {{isAllow}} </p> </p> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) {}); </script> </body> </html>
示例结果：
只允许使用在radio与select上，checkbox无效。
3.3、事件