AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解

1.AngularJS 事件指令

(1)ng-click 鼠标点击事件 

[html] 

 

< button ng-click="count = count + 1" ng-init="count=0"> Increment   </button>

 <span>  count: {{count}}  </span>  

(2)ng-dblclick 鼠标双击事件

[html] 

 

1. <button ng-dblclick="count = count + 1" ng-init="count=0">  
2.   Increment (on double click)  
3. </button>  
4. count: {{count}}  

(3)ng-mousedown 鼠标点击事件

[html] 

 

1. <button ng-mousedown="count = count + 1" ng-init="count=0">  
2.   Increment (on mouse down)  
3. </button>  
4. count: {{count}}  

(4)ng-mouseup 鼠标点击事件 

[html]

 

1. <button ng-mouseup="count = count + 1" ng-init="count=0">  
2.   Increment (on mouse down)  
3. </button>  
4. count: {{count}}  

(5)ng-mouseenter 鼠标移到上面触发事件 

[html]

 

1. <button ng-mouseenter="count = count + 1" ng-init="count=0">  
2.   Increment (when mouse enters)  
3. </button>  
4. count: {{count}}  

(6)ng-mouseleave 鼠标离开触发事件 

[html] 

 

1. <button ng-mouseleave="count = count + 1" ng-init="count=0">  
2.   Increment (when mouse leaves)  
3. </button>  
4. count: {{count}}  

(7)ng-mousemove 鼠标在上面移动即可触发 

[html] 

 

1. <button ng-mousemove="count = count + 1" ng-init="count=0">  
2.   Increment (when mouse moves)  
3. </button>  
4. count: {{count}}  

(8)ng-mouseover 鼠标经过上面即可触发 

[html] 

 

1. <button ng-mouseover="count = count + 1" ng-init="count=0">  
2.   Increment (when mouse is over)  
3. </button>  
4. count: {{count}}  

(9)ng-mouseout 鼠标点击触发 

[html] 

 

1. <button ng-mouseup="count = count + 1" ng-init="count=0">  
2.   Increment (on mouse up)  
3. </button>  
4. count: {{count}}  

(10)ng-keydown 键盘点击即可触发 

[html] 

 

1. <input ng-keydown="count = count + 1" ng-init="count=0">  
2. key down count: {{count}}  

(11)ng-keyup 键盘点击即可触发

[html]

 

1. <p>Typing in the input box below updates the key count</p>  
2. <input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}  
3.   
4. <p>Typing in the input box below updates the keycode</p>  
5. <input ng-keyup="event=$event">  
6. <p>event keyCode: {{ event.keyCode }}</p>  
7. <p>event altKey: {{ event.altKey }}</p>  

(12)ng-keypress 键盘点击即可触发 

[html]

 

1. <input ng-keypress="count = count + 1" ng-init="count=0">  
2. key press count: {{count}}  

(13)ng-focus/blur 同ng-click，键盘点击即可触发

 (14)ng-submit form表单提交 

[html] 

 

1. <script>  
2.   angular.module('submitExample', [])  
3.     .controller('ExampleController', ['$scope', function($scope) {  
4.       $scope.list = [];  
5.       $scope.text = 'hello';  
6.       $scope.submit = function() {  
7.         if ($scope.text) {  
8.           $scope.list.push(this.text);  
9.           $scope.text = '';  
10.         }  
11.       };  
12.     }]);  
13. </script>  
14. <form ng-submit="submit()" ng-controller="ExampleController">  
15.   Enter text and hit enter:  
16.   <input type="text" ng-model="text" name="text" />  
17.   <input type="submit" id="submit" value="Submit" />  
18.   <pre>list={{list}}</pre>  
19. </form>  

(15)ng-selected  

[html]

 

1. <label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/>  
2. <select aria-label="ngSelected demo">  
3.   <option>Hello!</option>  
4.   <option id="greet" ng-selected="selected">Greetings!</option>  
5. </select>  

(16) ng-change 

[html] 

 

1. <script>  
2.   angular.module('changeExample', [])  
3.     .controller('ExampleController', ['$scope', function($scope) {  
4.       $scope.counter = 0;  
5.       $scope.change = function() {  
6.         $scope.counter++;  
7.       };  
8.     }]);  
9. </script>  
10. <div ng-controller="ExampleController">  
11.   <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />  
12.   <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />  
13.   <label for="ng-change-example2">Confirmed</label><br />  
14.   <tt>debug = {{confirmed}}</tt><br/>  
15.   <tt>counter = {{counter}}</tt><br/>  
16. </div>  

2.AngularJS input相关指令

 (1)ng-disabled 禁用属性,用于select，input，button 

[html] 

 

1. <label>Click me to toggle:<input type="checkbox" ng-model="checked"/></label>  
2. <button ng-model="button" ng-disabled="checked">Button</button>  

(2)ng-readonly 禁止属性，用于input禁止输入 

[html] 

 

1. <label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>  
2. <input type="text" ng-readonly="checked" value="I'm AngularJS" aria-label="Readonly field" />  

(3)ng-checked 

[html] 

 

1. <label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/>  
2. <input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">  

 

(4)ng-value 

[html]

 

1. <script>  
2.    angular.module('valueExample', [])  
3.      .controller('ExampleController', ['$scope', function($scope) {  
4.        $scope.names = ['pizza', 'unicorns', 'robots'];  
5.        $scope.my = { favorite: 'unicorns' };  
6.      }]);  
7. </script>  
8.  <form ng-controller="ExampleController">  
9.    <h2>Which is your favorite?</h2>  
10.      <label ng-repeat="name in names" for="{{name}}">  
11.        {{name}}  
12.        <input type="radio"  
13.               ng-model="my.favorite"  
14.               ng-value="name"  
15.               id="{{name}}"  
16.               name="favorite">  
17.      </label>  
18.    <div>You chose {{my.favorite}}</div>  
19.  </form>  

3.AngularJS 样式指令

 (1)ng-class 

(2)ng-style

 

[html] 

 

1. <input type="button" value="set color" ng-click="myStyle={color:'red'}">  
2. <input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">  
3. <input type="button" value="clear" ng-click="myStyle={}">  
4. <br/>  
5. <span ng-style="myStyle">Sample Text</span>  
6. <pre>myStyle={{myStyle}}</pre>  

(3)ng-href  

[html] 

 

1. <a id="link-6" ng-href="{{value}}">link</a> (link, change location)  

(4)ng-src

 

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

4.angularjs DOM操作指令

(1)ng-if 

[html] 

 

1. <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>  
2. Show when checked:  
3. <span ng-if="checked" class="animate-if">  
4.   This is removed when the checkbox is unchecked.  
5. </span>  

(2)ng-show 

[html] 

 

1. Show: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br />  
2. <div class="check-element animate-show-hide" ng-show="checked">  
3.   I show up when your checkbox is checked.  
4. </div>  

(3)ng-switch 

[html]  view plain  copy

 

1. <!DOCTYPE html>  
2. <html lang="Zh-cn">  
3. <meta charset="utf-8">  
4. <head>  
5.     <title></title>  
6. </head>  
7. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  
8. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>  
9. <body>  
10. <div ng-app="myApp">  
11.     <div ng-controller="ExampleController">  
12.         <select ng-model="selection" ng-options="item for item in items"></select>  
13.         <code>selection={{selection}}</code>  
14.         <hr/>  
15.         <div ng-switch on="selection">  
16.             <div ng-switch-when="settings|options" ng-switch-when-separator="|">Settings Div</div>  
17.             <div ng-switch-when="home">Home Span</div>  
18.             <div ng-switch-default>default</div>  
19.         </div>  
20.     </div>  
21. </div>  
22. <script type="text/javascript">  
23.     var app = angular.module("myApp", ['ngAnimate']);  
24.     app.controller('ExampleController',['$scope',function($scope){  
25.         $scope.items=['settings','home','options','other'];  
26.         $scope.selection = $scope.items[0];  
27.     }]);  
28. </script>  
29. </body>  
30. </html>  

(4)ng-open 

[html] 

 

1. <label>Check me check multiple:<input type="checkbox" ng-model="open"/></label><br/>  
2.     <details id="details" ng-open="open">  
3.         <summary>Show/Hide me</summary>  
4.     </details>  

5.AngularJS ngBind/ngBindHtml/ngBindTemplate/ngInclude

 (1)ng-bind 显示数据类似于{{}} 

[html] 

 

1. <label>Enter name: <input type="text" ng-model="name"></label><br>  
2.  Hello <span ng-bind="name"></span>!  

(2)ng-bind-template 解决ng-bind中只能绑定一个的问题 

[html]

 

1. <label>Salutation: <input type="text" ng-model="salutation"></label><br>  
2.  <label>Name: <input type="text" ng-model="name"></label><br>  
3.  <pre ng-bind-template="{{salutation}} {{name}}!"></pre>  

(3)ng-bind-html 解析html代码 

[html] 

 

1. <div ng-app="myApp">  
2.     <div ng-controller="ExampleController">  
3.         <p ng-bind-html="myHTML"></p>  
4.     </div>  
5. </div>  
6. <script type="text/javascript">  
7.     var app = angular.module("myApp", ['ngSanitize']);  
8.     app.controller('ExampleController',['$scope',function($scope){  
9.         $scope.myHtml='I am an <code>HTML</code>string with'+'<a href="#">links!</a> and other <em>stuff</em>';  
10.     }]);  
11. </script>  

(4)ng-include 加载外部html页面 

[html] 

 

1. <div ng-include="'index.html'"></div>  

6.ng-init/ng-mode/ng-model-options/ng-controller

 

(1)ng-init 初始化数据

(2)ng-model 绑定到input，select，textarea的值

(3)ng-model-options 控制双向事件绑定的时候，触发事件的方式

(4)ng-controller 绑定控制器

转载于:https://www.cnblogs.com/minghui007/p/7194178.html