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 绑定控制器

posted @ 2017-07-17 14:45  铭绘  阅读(444)  评论(0)  编辑  收藏  举报