Angularjs 事件指令 input 相关指令 和样式指令
DOM 操作指令详解
学习要点：
1. AngularJs 事件指令
2. input 相关指令
3. 样式指令
4. DOM 操作指令
5. ngBind/ngBindHtml/ngBindTemplate 重点
6. ng-init ng-mode ng-model-options ng-controler
1. Angularjs 事件指令
自己研究：
ng-click/dbclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit
重点讲述：
ng-selected
ng-change
ng-copy
ng-cut
ng-paste
ng-cloak 在 angular 中为我们提供了 ng-cloak 来实现纺织闪烁的方案，我们只需
要在需要的地方加上 ng-cloak。同时对于 bing 文字({{ express }} )我们也可以改为 ng-bind
来实现避免。
ng-non-bindable 如果我们就想要一个{{}} 这样的内容就可以使用 ng-clock
<input type="checkbox" ng-model="aaa">
<select>
<option>11111</option>
<option ng-selected="aaa">22222</option>
</select>
<input type="text" ng-change="bbb=‘hello‘" ng-model="bbb">{{bbb}}<br>
<input type="text" value="aasdassssssss" ng-paste="ccc=true">{{ccc}}
2. Angularjs input 相关指令
ng-disabled
ng-readonly
ng-checked
ng-value
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<input type="button" ng-value="text" ng-disabled="isDisabled">
<input type="text" value="{{text}}" ng-readonly="isDisabled">
<input type="checkbox" value="{{text}}" ng-checked="isDisabled">
</div>
</div>
<script type="text/javascript">
var app = angular.module(‘myApp‘,[]);
app.controller(‘firstController‘,[‘$scope‘,‘$interval‘,function($scope,$interval){
var iNow = 5;
$scope.text = iNow+‘秒‘;
$scope.isDisabled = true;
//setInterval -> $scope.$apply()
//$timeout $interval
var timer = $interval(function(){
iNow--;
$scope.text = iNow+‘秒‘;
if(iNow == 0){
$interval.cancel(timer);
$scope.text = ‘可以点击啦‘;
$scope.isDisabled = false;
}
},1000);
}]);
</script>
</body>
</html>
3. Angularjs 样式指令
ng-class
ng-style
ng-href
ng-src
ng-attr-(suffix) html 中属性可能有多了 angularjs 提供了一种通用的写法
如： ng-attr- href
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
$scope.text = ‘hello‘;
$scope.style = "{color:‘red‘,background:‘yellow‘}";
$scope.sClass = "{red:true,yellow:true}";
$scope.url = "http://www.baidu.com";
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{yellow:true}">{{text}}</div>
<div ng-class="{red:true}">{{text}}</div>
<div ng-class="{{sClass}}">{{text}}</div>
<div ng-style="{{style}}">{{text}}</div>
<a ng-href="{{url}}">aaaaaaa</a>
<a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class=""
ng-attr-style="">aaaaaaa</a>
</div>
<script>
//alert(1);
</script>
</body>
</html>
4. Angularjs DOM 操作指令
ng-show display 隐藏显示
<div ng-show="bBtn">aaaaaaaaaaaa</div>
ng-if dom 操作
<div ng-if="bBtn">aaaaaaaaaaaa</div>
ng-switch
<div ng-switch on="bBtn">
<p ng-switch-default>默认的效果</p>
<p ng-switch-when="false">切换的效果</p>
</div>
ng-open
<details ng-open="bBtn">
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of
W3School.</p>
</details>
5. Angularjs ngBind/ngBindHtml/ngBindTemplate/ ngInclude
ngBind 显示数据类似于 {{}}
ngBindTemplate 解决 ng-bind 中只能绑定一个的问题
ngBindHtml 解析 html 代码
ngInclude 加载外部页面
6. ng-init ng-mode ng-model-options ng-controler
ng-init
<script>
angular.module(‘initExample‘, [])
.controller(‘ExampleController‘, [‘$scope‘, function($scope)
{
$scope.list = [[‘a‘, ‘b‘], [‘c‘, ‘d‘]];
}]);
</script>
<div ng-controller="ExampleController">
<div ng-repeat="innerList in list" ng-init="outerIndex =
$index">
<div ng-repeat="value in innerList" ng-init="innerIndex =
$index">
<span
class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] =
{{value}};</span>
</div>
</div>
</div>
ng-mode
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
/*var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
$scope.text = ‘hello‘;
}]);*/
var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,FnAaa]);
function FnAaa($scope){
}
FnAaa.prototype.num = ‘123‘;
FnAaa.prototype.text = ‘hello‘;
FnAaa.prototype.show = function(){
return ‘angularJS‘;
};
</script>
</head>
<body>
<!--<div ng-controller="Aaa">
<input type="text" ng-model="text" ng-model-options="{updateOn : ‘blur‘}">
<div>{{text}}</div>
</div>-->
<div ng-controller="FnAaa as a1">
<div>{{a1.text}}:{{a1.show()}}</div>
</div>
</body>
</html>
ng-model-options 控制双向事件绑定的时候 触发事件的方式
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ updateOn: ‘blur‘ }"
ng-keyup="cancel($event)" /><br />
Other data:
<input type="text" ng-model="user.data" /><br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
ng-controler
