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

web开发作者:dayu日期:5天前点击:1
  • <buttonng-dblclick="count=count+1"ng-init="count=0">
  • Increment(ondoubleclick)
  • </button>
  • count:{{count}}

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

    [html]


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

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

    [html]


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

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

    [html]


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

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

    [html]


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

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

    [html]


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

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

    [html]


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

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

    [html]


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

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

    [html]


    1. <inputng-keydown="count=count+1"ng-init="count=0">
    2. keydowncount:{{count}}

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

    [html]


    1. <p>Typingintheinputboxbelowupdatesthekeycount</p>
    2. <inputng-keyup="count=count+1"ng-init="count=0">keyupcount:{{count}}
    3. <p>Typingintheinputboxbelowupdatesthekeycode</p>
    4. <inputng-keyup="event=$event">
    5. <p>eventkeyCode:{{event.keyCode}}</p>
    6. <p>eventaltKey:{{event.altKey}}</p>

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

    [html]


    1. <inputng-keypress="count=count+1"ng-init="count=0">
    2. keypresscount:{{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. <formng-submit="submit()"ng-controller="ExampleController">
    15. Entertextandhitenter:
    16. <inputtype="text"ng-model="text"name="text"/>
    17. <inputtype="submit"id="submit"value="Submit"/>
    18. <pre>list={{list}}</pre>
    19. </form>

    (15)ng-selected

    [html]




    1. <label>Checkmetoselect:<inputtype="checkbox"ng-model="selected"></label><br/>
    2. <selectaria-label="ngSelecteddemo">
    3. <option>Hello!</option>
    4. <optionid="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. <divng-controller="ExampleController">
    11. <inputtype="checkbox"ng-model="confirmed"ng-change="change()"id="ng-change-example1"/>
    12. <inputtype="checkbox"ng-model="confirmed"id="ng-change-example2"/>
    13. <labelfor="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>Clickmetotoggle:<inputtype="checkbox"ng-model="checked"/></label>
    2. <buttonng-model="button"ng-disabled="checked">Button</button>

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

    [html]


    1. <label>Checkmetomaketextreadonly:<inputtype="checkbox"ng-model="checked"></label><br/>
    2. <inputtype="text"ng-readonly="checked"value="I‘mAngularJS"aria-label="Readonlyfield"/>

    (3)ng-checked

    [html]


    1. <label>Checkmetocheckboth:<inputtype="checkbox"ng-model="master"></label><br/>
    2. <inputid="checkSlave"type="checkbox"ng-checked="master"aria-label="Slaveinput">

    (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. <formng-controller="ExampleController">
    9. <h2>Whichisyourfavorite?</h2>
    10. <labelng-repeat="nameinnames"for="{{name}}">
    11. {{name}}
    12. <inputtype="radio"
    13. ng-model="my.favorite"
    14. ng-value="name"
    15. id="{{name}}"
    16. name="favorite">
    17. </label>
    18. <div>Youchose{{my.favorite}}</div>
    19. </form>

    3.AngularJS 样式指令

    (1)ng-class

    (2)ng-style

    [html]


    1. <inputtype="button"value="setcolor"ng-click="myStyle={color:‘red‘}">
    2. <inputtype="button"value="setbackground"ng-click="myStyle={‘background-color‘:‘blue‘}">
    3. <inputtype="button"value="clear"ng-click="myStyle={}">
    4. <br/>
    5. <spanng-style="myStyle">SampleText</span>
    6. <pre>myStyle={{myStyle}}</pre>

    (3)ng-href

    [html]


    1. <aid="link-6"ng-href="{{value}}">link</a>(link,changelocation)

    (4)ng-src

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

    4.angularjsDOM操作指令

    (1)ng-if

    [html]


    1. <label>Clickme:<inputtype="checkbox"ng-model="checked"ng-init="checked=true"/></label><br/>
    2. Showwhenchecked:
    3. <spanng-if="checked"class="animate-if">
    4. Thisisremovedwhenthecheckboxisunchecked.
    5. </span>

    (2)ng-show

    [html]


    1. Show:<inputtype="checkbox"ng-model="checked"aria-label="TogglengShow"><br/>
    2. <divclass="check-elementanimate-show-hide"ng-show="checked">
    3. Ishowupwhenyourcheckboxischecked.
    4. </div>

    (3)ng-switch

    [html]view plaincopy


    1. <!DOCTYPEhtml>
    2. <htmllang="Zh-cn">
    3. <metacharset="utf-8">
    4. <head>
    5. <title></title>
    6. </head>
    7. <scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    8. <scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    9. <body>
    10. <divng-app="myApp">
    11. <divng-controller="ExampleController">
    12. <selectng-model="selection"ng-options="itemforiteminitems"></select>
    13. <code>selection={{selection}}</code>
    14. <hr/>
    15. <divng-switchon="selection">
    16. <divng-switch-when="settings|options"ng-switch-when-separator="|">SettingsDiv</div>
    17. <divng-switch-when="home">HomeSpan</div>
    18. <divng-switch-default>default</div>
    19. </div>
    20. </div>
    21. </div>
    22. <scripttype="text/javascript">
    23. varapp=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>Checkmecheckmultiple:<inputtype="checkbox"ng-model="open"/></label><br/>
    2. <detailsid="details"ng-open="open">
    3. <summary>Show/Hideme</summary>
    4. </details>

    5.AngularJS ngBind/ngBindHtml/ngBindTemplate/ngInclude

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

    [html]


    1. <label>Entername:<inputtype="text"ng-model="name"></label><br>
    2. Hello<spanng-bind="name"></span>!

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

    [html]




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

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

    [html]


    1. <divng-app="myApp">
    2. <divng-controller="ExampleController">
    3. <png-bind-html="myHTML"></p>
    4. </div>
    5. </div>
    6. <scripttype="text/javascript">
    7. varapp=angular.module("myApp",[‘ngSanitize‘]);
    8. app.controller(‘ExampleController‘,[‘$scope‘,function($scope){
    9. $scope.myHtml=‘Iaman<code>HTML</code>stringwith‘+‘<ahref="#">links!</a>andother<em>stuff</em>‘;
    10. }]);
    11. </script>

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

    [html]


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

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

    原文地址:http://www.cnblogs.com/minghui007/p/7194178.html


    下一篇       上一篇