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. <p>Typing in the input box below updates the keycode</p>
4. <input ng-keyup="event=$event">
5. <p>event keyCode: {{ event.keyCode }}</p>
6. <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 绑定控制器