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

来源：互联网发布：大麦盒子电视直播软件编辑：程序博客网时间：2024/04/17 04:57

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="xin 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>

0 0