指令ng-readonly/ng-checked/ng-src ng-href/ng-switch/ng-if/ng-repeat/ng-style/ng-init/ng-bind/ng-change

ng-readonly:

<input type="text" ng-model="someProperty">

<input type="text" ng-readonly="someProperty" value="Some text here" />

<br>

ng-checked:

<label>Property:{{Property}}</label>

<input type="checkbox" ng-checked="Property" ng-init="Property=true">

<br>

类布尔属性：ng-src ng-href

<!-- ng-href和ng-src都能有效帮助重构和避免错误 由插值动态生成的链接时，如果插值尚未生效，将会跳转到错误的页面(404) -->

<a href="{{vm.url}}">404</a>

<a ng-href="{{vm.url}}">baidu</a>

<img src="{{vm.src}}" >

<img ng-src="{{vm.src}}" >

$timeout(function () {

vm.url = "http://www.baidu.com";

}, 5000)

$timeout(function () {

vm.src = 'https://www.google.com/images/srpr/logo11w.png';

}, 2000)

 

ng-switch:

<input type="text" ng-model="person.name"/>

<div ng-switch on="person.name">

<div ng-switch-default >winner is</div>

<div ng-switch-when="Ari">{{person.name}}</div>

</div>

 

<!-- ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。 -->

<div ng-if="2+2===5">

Won't see this DOM node, not even in the source code

</div>

<div ng-if="2+2===4">

Hi, I do exist

</div>

 

ng-repeat/ng-style:

<!--

 $index：遍历的进度（0...length-1）。

 $first：当元素是遍历的第一个时值为true。

 $middle：当元素处于第一个和最后元素之间时值为true。

 $last：当元素是遍历的最后一个时值为true。

 $even：当$index值是偶数时值为true。

 $odd：当$index值是奇数时值为true。

-->

<ul>

<li ng-repeat="item in people" ng-style="{background:($even)?'red':'blue'}">

{{item.name}} {{item.city}}

</li>

</ul>

$scope.people = [

{name: "Ari", city: "San Francisco"},

{name: "Erik", city: "Seattle"}

];

<br>

ng-init:

<!-- ng-init指令用来在指令被调用时设置内部作用域的初始状态。 -->

<div ng-init="greeting='hello';person='world'">

{{greeting}} {{person}}

</div>

<br>

ng-bind/{{}}/ng-cloak:

<!-- 注意，在屏幕可视的区域内使用{{ }}会导致页面加载时未渲染的元素发生闪烁，用ng-bind,ng-cloak可以避免这个问题 -->

<div ng-init="greeting='HelloWorld'">

{{greeting}}

<div ng-bind="greeting"></div>

<div ng-cloak>{{greeting}}</div>

</div>

<br>

ng-bind-template:

<div ng-bind-template="{{people[0].name}}{{people[0].city}}"></div>

$scope.people = [

{name: "Ari", city: "San Francisco"},

{name: "Erik", city: "Seattle"}

];

ng-model

<!-- 我们应该始终用ngModel来绑定$scope上一个数据模型内的属性，而不是$scope上的属性，这可以避免在作用域或后代作用域中发生属性覆盖。 -->

<input type="text" ng-model="modelName.someProperty" />

<br>

ng-change:

<input type="text" ng-model="equation.x" ng-change="vm.change()">

<code>{{ equation.output }}</code>

$scope.equation={}

vm.change=change;

function change(){

$scope.equation.output=parseInt($scope.equation.x)*2

}