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 countp>  
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 keycodep>  
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">Confirmedlabel>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">Buttonbutton>  

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 Textspan>  
6. pre>myStyle={{myStyle}}pre>  

1. a id="link-6" ng-href="{{value}}">linka> (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. 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 Divdiv>  
17.             div ng-switch-when="home">Home Spandiv>  
18.             div ng-switch-default>defaultdiv>  
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 mesummary>  
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 HTMLstring with‘+‘a href="#">links!a> and other em>stuffem>‘;  
10.     }]);  
11. script>  

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