AngularJS ng-model-options 指令AngularJS 实例在失去焦点时绑定输入框的值到 scope 变量中： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><p>更新输入框:</p> <input ng-model="name" ng-model-options="{updateOn: blur}"><p>在失去焦点时绑定输入框的值到 scope 变...
AngularJS ng-mouseenter 指令 AngularJS 实例在鼠标指针穿过元素时执行表达式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-mouseenter="count = count + 1" ng-init="count=0">鼠标穿过我!</div><h1>{{count}}</h1><p> 该实例在鼠标穿过 DIV 元素时，计算变量 "count" 会自动加 1。</p></body...
AngularJS ng-csp 指令AngularJS 实例修改 AngularJS 中关于 "eval" 的行为方式及内联样式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="" ng-csp><div><p>我的第一个表达式: {{ 5 + 5 }}</p></div><p>使用 ng-csp 指令, 你可以修改 AngularJS 执行代码的方式。</p><p>AngularJS 的执行方式提高了 30% 的性...
AngularJS ng-cut 指令AngularJS 实例 输入框的文本被剪切时执行表达式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><input ng-cut="count = count + 1" ng-init="count=0" value="剪切这个文本" /><p>文本被剪切了 {{count}} 次。</p><p>实例中计数变量 "count" 在每次剪切后自动增加 1。</p></body> ...
AngularJS ng-copy 指令AngularJS 实例在输入框的文本被拷贝时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><input ng-copy="count = count + 1" ng-init="count=0" value="拷贝这个文本" /><p>文本被拷贝 {{count}} 次。</p><p>实例中变量 "count" 的值在输入框的文本被拷贝时会自动增加 1。...
AngularJS ng-hide 指令AngularJS 实例在复选框选中时隐藏一部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="">隐藏 HTML: <input type="checkbox" ng-model="myVar"><div ng-hide="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> </div></body> </html>定义和用法ng-hide 指令在表达式为 true 时...
AngularJS ng-href 指令 AngularJS 实例使用 AngularJS 设置添加链接: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-init="myVar = http://www.runoob.com"> <h1>菜鸟教程</h1> <p>访问 <a ng-href="{{myVar}}">{{myVar}}</a> 学习!</p> </div><p>该实例可以使用了原生的 href 属性，但在 Angular...
AngularJS ng-dblclick 指令AngularJS 实例在每次鼠标双击时，变量 count 加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>鼠标双击标题:</p><h1 ng-dblclick="count = count + 1" ng-init="count=0">Welcome</h1><p>双击了 {{count}} 次。</p><p>计数变量 "count" 在每次鼠标双击标题后加 1。</p><...
AngularJS ng-if 指令AngularJS 实例取消选中，并移除内容:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="">保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true"><div ng-if="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> <hr> </div><p>当复选框取消选中时 DIV 元素将移除...
AngularJS ng-focus 指令 AngularJS 实例当输入框获取焦点时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><input ng-focus="count = count + 1" ng-init="count=0" /><h1>{{count}}</h1><p>该实例在输入框每次获取焦点时，计算变量 "count" 会自动加 1。</p></body> </html> 该实例在输入框每...
AngularJS ng-disabled 指令AngularJS 实例 禁用或启用输入框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 点击这里禁用所有表单输入域:<input type="checkbox" ng-model="all"><br> <br><input type="text" ng-disabled="all"> <input type="radio" ng-disabled="all"> <select ng-disabled="all"><op...
AngularJS ng-class-odd 指令AngularJS 实例为表格的奇数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .striped {color:white;background-color:black; } </style> </head> <body ng-app="myApp"><table ng-controller="myCtrl"> <tr ng-repeat="x in records" ng-class-odd="striped"><td>{{x.Na...
AngularJS ng-click 指令AngularJS 实例按钮每次点击时，计数变量 count 自动加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>点击按钮:</p><button ng-click="count = count + 1" ng-init="count=0">OK</button><p>按钮被点击了 {{count}} 次。</p><p>实例中，按钮每被点击一次变量 "count" 会自动...
AngularJS ng-class-even 指令AngularJS 实例为表格的偶数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .striped {color:white;background-color:black; } </style> </head> <body ng-app="myApp"><table ng-controller="myCtrl"> <tr ng-repeat="x in records" ng-class-even="striped"><td>{{x....
AngularJS ng-cloak 指令AngularJS 实例页面加载时防止应用闪烁:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app=""><p ng-cloak>{{ 5 + 5 }}</p><p><b>注意：</b> 该实例只是演示了指令的应用。</p></div></body> </html> 运行结果： 10 注意： 该实例只是演示了指令的应用。...