以下是为您整理出来关于【angular基础】合集内容，如果觉得还不错，请帮忙转发推荐。
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 注意： 该实例只是演示了指令的应用。...