angularJS学习之路(六)---指令

来源:互联网 发布:大麦盒子电视直播软件 编辑:程序博客网 时间:2024/06/23 00:32

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
原创粉丝点击