【AngularJS】6.AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解
2017-03-30 15:45
731 查看
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-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 键盘点击即可触发
<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', [])
.controller('ExampleController', ['$scope', 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', ['$scope', 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',['$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页面
<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 绑定控制器
(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', [])
.controller('ExampleController', ['$scope', 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', ['$scope', 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',['$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页面
<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 绑定控制器
相关文章推荐
- AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解
- Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解
- angularjs教程——Dom操作相关指令详解
- angularjs教程——input相关指令详解
- angularJS DOM操作相关指令
- AngularJS基础——事件指令及input相关指令
- AngularJS基础——样式指令、DOM操作指令及其它重要指令
- angularJS中input相关指令详解
- angularjs教程——样式相关指令详解
- angularJS之使用指令封装DOM操作
- angularJS之使用指令封装DOM操作
- 如何监听Angularjs列表数据是否渲染完毕,配合jQuery操作DOM,指令的规范
- AngularJs的事件处理指令详解
- Web29. jQuery选择器 Dom操作 样式 事件处理 动画
- 详解vue指令与$nextTick 操作DOM的不同之处
- angularJS 样式相关指令
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- jQuery(二)DOM增删改,样式操作,文档加载,事件,冒泡,事件对象
- 【DOM操作】实时监听input[type='text']和HTML标签中属性改变事件