AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
一开始需要知道的几个指令:
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-repeat 指令会重复一个 HTML 元素:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
更多的 angularJS 指令:
一、重载HTML元素指令
ng-href 动态创建url的时候必用
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
ng-disabled:
下面代码中:input 如果没有输入,按钮是不能被点击的
textarea 被禁用1秒
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Demo 1:</h1>
<input type="text" ng-model="someProperty" placeholder="Type to Enable">
<button ng-model="button" ng-disabled="!someProperty">A Button</button>
{{someProperty}}
<h1>Demo 2:</h1>
<textarea ng-disabled="isDisabled">Wait 1 second</textarea>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
// JS for demo 2:
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
$rootScope.isDisabled = true;
$timeout(function() {
$rootScope.isDisabled = false;
}, 1000);
});
</script>
</body>
</html>
一个东西需要说明:根据HTML标准,布尔属性代表一个true或者false值,当这个属性出现的时候,这个属性的值就是true, 无论实际值是什么,如果未出现,这个属性的值就是false
下面的select 会对你选择的值进行动态的变化
<label>Select Two Fish:</label>
<input type="checkbox" ng-model="isTwoFish">
<br/>
<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>
ng-href:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Always use ng-href when href includes an {{ expression }} -->
<a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>
<!-- href may not load before user clicks -->
<a href="{{myHref}}">I'm feeling 404</a>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.myHref = 'http://baidu.com';
}, 2000);
});
</script>
</body>
</html>
ng-src:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Wrong Way</h1>
<img src="{{imgSrc}}" />
<h1>Right way</h1>
<img ng-src="{{imgSrc}}" />
<script type="text/javascript" src="../js/angular.min.js"></script>
<script>
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.imgSrc = 'http://img1.kuwo.cn/star/starheads/240/34/11/220267175.jpg';
}, 2000);
});
</script>
</body>
</html>