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
}