angularJS学习之路（六）---指令

AngularJS 指令

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>