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

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

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

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

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

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

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

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

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

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

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

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>  

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

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>  

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>  

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>  

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

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" />  

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">  

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>  

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>  

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

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>  

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>  

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>  

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>  

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

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>  

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>  

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