ng-repeat指令
ng-repeat指令的作用：
遍历集合
通过in的方式遍历每一项。类似vue.js中的v-for
callee 是 arguments 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数。这在函数的名称是未知时很有用，例如在没有名称的函数表达式 (也称为“匿名函数”)内； 返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文； arguments.length是实参长度，arguments.callee.length是形参长度； 在ES5严格模式中，禁止使用arguments.callee：这意味着，你无法在匿名函数内部调用自身了。<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); app.controller("Aaa",["$scope","$filter",function($scope,$filter){ /* $scope.dataList=["aa","bb","cc"];*/ $scope.originList=[ {color:"red",age:"26"}, {color:"green",age:"25"}, {color:"yellow",age:"16"}, {color:"blue",age:"30"} ]; $scope.userList= $scope.originList; $scope.fnSort=function(arg){ //在当前函数对象上设置排序方式开关，第一次点击从大到小，第二次点击从小到大 arguments.callee['fnSort'+arg]=!arguments.callee['fnSort'+arg]; $scope.userList=$filter("orderBy")( $scope.originList,arg,arguments.callee['fnSort'+arg]); }; $scope.fnSearch=function(){ $scope.userList= $filter("filter")($scope.originList,$scope.keyword); } }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="text" ng-model="keyword"><input type="button" value="搜索" ng-click="fnSearch()"> <table> <tbody> <tr> <th ng-click="fnSort('color')">姓名</th> <th ng-click="fnSort('age')">年龄</th> </tr> <tr ng-repeat="data in userList"> <td>{{data.color}}</td> <td>{{data.age}}</td> </tr> </tbody> </table> </div> </body> </html> </pre>"use strict";
var f = function() { return arguments.callee; }; f(); // 报错np-repeat指令的扩展
- $index 每一项索引
- $first
<li ng-repeat=" data in dataList">{{$first}}</li>，除了第一项为true，其余项为false。 last，与 first相反- $middle
<li ng-repeat=" data in dataList">{{$first}}</li>，除了第一项和最后一项为false，其余项为true。 even和 odd
<li class="{{$even ? 'acive': 'normal'}}" ng-repeat=" data in dataList">{{data}}</li>，实现隔行变色ng-repeat-start和ng-repeat-end
当想要重复的html结构不是包含关系，而是兄弟关系，可采用此种辅助方式。<pre> <div ng-repeat-start=" data in dataList">{{data}}+1</div> <p>{{data}}+2</p> <div ng-repeat-end>{{data}}+3</div> </pre>
事件指令
与原生事件相比，支持表达式和数据变量。
- ng-click/dbclick
- ng-mousedown/up
- ng-mousemove/over/out
- ng-keydown/up/press
- ng-focus/blur
- ng-submit
- ng-selected 下拉菜单被选中的时候，触发此事件
- ng-change 输入框内的值只要一变化，就会触发此事件
注意：ng-change必须和ng-model一起使用才会起作用。
<input type="type" ng-change="bb='hello' ng-model="bb" >{{bb}}
ng-change指令内也可以写函数。
- ng-cut/copy/paste
当我们在输入框中进行剪切、复制、黏贴操作，就会触发相应的指令。
input相关指令
- ng-disabled 可动态设置表单控件的状态
- ng-readonly
readonly与disabled的区别：
readonly只能用于输入框（text、textarea）,对于按钮是不起作用的;
输入框设置了readonly属性还是可以提交，但是设置了disabled属性就不可以。 - ng-checked 用于checkbox
- ng-value 针对表单控件的value
<input type="text" ng-value="val">，效果类似于：<input type="text" value="{{val}}">。
选择用ng-vaule会更好一些，原因在于：
当浏览器运行时，是先解析html代码，再执行JS代码，如果用户的网速比较慢，那么浏览器解析JS代码也可能会比较慢，用户很有可能会看到“{{val}}”这样的内容，所以会导致用户体验性不好，用ng-value就不会出现这个问题。
数据显示优化处理及插件简介
- ng-bind
为了解决在html标签中，直接使用“{{html}}”可能会出现与上文相同的问题，改用ng-bind。
<div>{{html}}</div>,改用<div ng-bind="html"></div>。
ng-bind只能写一个表达式。如果想写多个表达式，可用ng-bind-template指令 - ng-bind-template
<div ng-bind-template="{{html}}，{{html}}"></div> ng-bind-html
支持变量的值含有html标签，即能够识别html标签，而ng-bind和ng-bind-template不能，会把html标签当成普通字符串。
由于一般都是处理纯数据很少有需求是要带html标签，ng-bind-html用的比较少，angular就把这一块单独提取出来形成插件，而没有像那些通用的指令存放在angular库中
http://www.bootcdn.cn/angular.js/，可以有免费的CDN提供插件下载。<pre> //解析html的插件 <script src="js/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.6.0/angular-sanitize.js"></script> <script> //它既是一个插件也是一个模块，所以引用它，就需要依赖这个模块 var m1=angular.nodule("app",['ngSanitize']); m1.controller("Aaa",['$scope',function($scope){ $scope.text='<h1>hello</h1>'; }]); </script> <body> <div ng-controller="Aaa"> <div ng-bind-html="text"></div> </div> </body> </pre>
-ng-cloak
用来控制css的一种方式
<div ng-cloak>{{text}}</div>,加上cloak指令后，这个div标签的display为none隐藏,当表达式解析完成后，就让这个div标签的display为block显示出来。
- ng-non-bindable
用来使表达式不被解析。
<div ng-non-bindable>{{text}}</div>,运行结果就是“{{text}}”表达式没有被解析。
