【AngularJS】6.AngularJS 事件指令/input相关指令/样式指令/DOM
发布时间:2020-12-17 09:25:30 所属栏目:安全 来源:网络整理
导读:1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 button ng-click="count = count + 1" ng-init="count=0" Increment/buttonspan count: {{count}}/span (2)ng-dblclick 鼠标双击事件 button ng-dblclick="count = count + 1" ng-init="count=0" Increment (
1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 <button ng-click="count = count + 1" ng-init="count=0"> Increment </button> <span> count: {{count}} </span>(2)ng-dblclick 鼠标双击事件 <button ng-dblclick="count = count + 1" ng-init="count=0"> Increment (on double click) </button> count: {{count}}(3)ng-mousedown 鼠标点击事件 <button ng-mousedown="count = count + 1" ng-init="count=0"> Increment (on mouse down) </button> count: {{count}}(4)ng-mouseup 鼠标点击事件 <button ng-mouseup="count = count + 1" ng-init="count=0"> Increment (on mouse down) </button> count: {{count}}(5)ng-mouseenter 鼠标移到上面触发事件 <button ng-mouseenter="count = count + 1" ng-init="count=0"> Increment (when mouse enters) </button> count: {{count}}(6)ng-mouseleave 鼠标离开触发事件 <button ng-mouseleave="count = count + 1" ng-init="count=0"> Increment (when mouse leaves) </button> count: {{count}}(7)ng-mousemove 鼠标在上面移动即可触发 <button ng-mousemove="count = count + 1" ng-init="count=0"> Increment (when mouse moves) </button> count: {{count}}(8)ng-mouSEOver 鼠标经过上面即可触发 <button ng-mouSEOver="count = count + 1" ng-init="count=0"> Increment (when mouse is over) </button> count: {{count}}(9)ng-mouSEOut 鼠标点击触发 <button ng-mouseup="count = count + 1" ng-init="count=0"> Increment (on mouse up) </button> count: {{count}}(10)ng-keydown 键盘点击即可触发 <input ng-keydown="count = count + 1" ng-init="count=0"> key down count: {{count}}(11)ng-keyup 键盘点击即可触发 <p>Typing in the input box below updates the key count</p> <input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}} <p>Typing in the input box below updates the keycode</p> <input ng-keyup="event=$event"> <p>event keyCode: {{ event.keyCode }}</p> <p>event altKey: {{ event.altKey }}</p>(12)ng-keypress 键盘点击即可触发 <input ng-keypress="count = count + 1" ng-init="count=0"> key press count: {{count}}(13)ng-focus/blur 同ng-click,键盘点击即可触发 (14)ng-submit form表单提交 <script> angular.module('submitExample',[]) .controller('ExampleController',['$scope',function($scope) { $scope.list = []; $scope.text = 'hello'; $scope.submit = function() { if ($scope.text) { $scope.list.push(this.text); $scope.text = ''; } }; }]); </script> <form ng-submit="submit()" ng-controller="ExampleController"> Enter text and hit enter: <input type="text" ng-model="text" name="text" /> <input type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre> </form>(15)ng-selected <label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/> <select aria-label="ngSelected demo"> <option>Hello!</option> <option id="greet" ng-selected="selected">Greetings!</option> </select>(16) ng-change <script> angular.module('changeExample',function($scope) { $scope.counter = 0; $scope.change = function() { $scope.counter++; }; }]); </script> <div ng-controller="ExampleController"> <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" /> <input type="checkbox" ng-model="confirmed" id="ng-change-example2" /> <label for="ng-change-example2">Confirmed</label><br /> <tt>debug = {{confirmed}}</tt><br/> <tt>counter = {{counter}}</tt><br/> </div>2.AngularJS input相关指令 (1)ng-disabled 禁用属性,用于select,input,button <label>Click me to toggle:<input type="checkbox" ng-model="checked"/></label> <button ng-model="button" ng-disabled="checked">Button</button>(2)ng-readonly 禁止属性,用于input禁止输入 <label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/> <input type="text" ng-readonly="checked" value="I'm AngularJS" aria-label="Readonly field" />(3)ng-checked <label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/> <input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input"> (4)ng-value <script> angular.module('valueExample',[]) .controller('ExampleController',function($scope) { $scope.names = ['pizza','unicorns','robots']; $scope.my = { favorite: 'unicorns' }; }]); </script> <form ng-controller="ExampleController"> <h2>Which is your favorite?</h2> <label ng-repeat="name in names" for="{{name}}"> {{name}} <input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"> </label> <div>You chose {{my.favorite}}</div> </form>3.AngularJS 样式指令 (1)ng-class (2)ng-style <input type="button" value="set color" ng-click="myStyle={color:'red'}"> <input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}"> <input type="button" value="clear" ng-click="myStyle={}"> <br/> <span ng-style="myStyle">Sample Text</span> <pre>myStyle={{myStyle}}</pre>(3)ng-href <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 <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/> Show when checked: <span ng-if="checked" class="animate-if"> This is removed when the checkbox is unchecked. </span>(2)ng-show Show: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br /> <div class="check-element animate-show-hide" ng-show="checked"> I show up when your checkbox is checked. </div>(3)ng-switch <!DOCTYPE html> <html lang="Zh-cn"> <meta charset="utf-8"> <head> <title></title> </head> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script> <body> <div ng-app="myApp"> <div ng-controller="ExampleController"> <select ng-model="selection" ng-options="item for item in items"></select> <code>selection={{selection}}</code> <hr/> <div ng-switch on="selection"> <div ng-switch-when="settings|options" ng-switch-when-separator="|">Settings Div</div> <div ng-switch-when="home">Home Span</div> <div ng-switch-default>default</div> </div> </div> </div> <script type="text/javascript"> var app = angular.module("myApp",['ngAnimate']); app.controller('ExampleController',function($scope){ $scope.items=['settings','home','options','other']; $scope.selection = $scope.items[0]; }]); </script> </body> </html>(4)ng-open <label>Check me check multiple:<input type="checkbox" ng-model="open"/></label><br/> <details id="details" ng-open="open"> <summary>Show/Hide me</summary> </details>5.AngularJS ngBind/ngBindHtml/ngBindTemplate/ngInclude (1)ng-bind 显示数据类似于{{}} <label>Enter name: <input type="text" ng-model="name"></label><br> Hello <span ng-bind="name"></span>!(2)ng-bind-template 解决ng-bind中只能绑定一个的问题 <label>Salutation: <input type="text" ng-model="salutation"></label><br> <label>Name: <input type="text" ng-model="name"></label><br> <pre ng-bind-template="{{salutation}} {{name}}!"></pre>(3)ng-bind-html 解析html代码 <div ng-app="myApp"> <div ng-controller="ExampleController"> <p ng-bind-html="myHTML"></p> </div> </div> <script type="text/javascript"> var app = angular.module("myApp",['ngSanitize']); app.controller('ExampleController',function($scope){ $scope.myHtml='I am an <code>HTML</code>string with'+'<a href="#">links!</a> and other <em>stuff</em>'; }]); </script>(4)ng-include 加载外部html页面 <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 绑定控制器 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |