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

落日映苍穹つ 2022-06-18 05:15 248阅读 0赞

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表单提交

(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

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

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

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',['$scope',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',['$scope',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页面

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