AngularJS-常用指令

1.ng-repeat

类似于java里面的foreach语法，它将指令所在的DOM元素复制若干次，适用于生成列表。

ng-repeat指令可以通过 $index返回当前引用的元素序号，从0开始。

<!-- 一个例子 -->
<table ng-controller='AlbumController'>
	<tr ng-repeat='track in album'>
		<td>{{$index+1}}</td>
		<td>{{track.name}}</td>
		<td>{{track.duration}}</td>
	</tr>
</table>

2.ng-class

用于指定标签的class属性，后面可跟表达式。

isActive()是自定义的函数，js见下：

	$scope.isActive = function(rule,status) {
				if(rule.status==status)
					return 'btn btn-success';
				else 
					return 'btn btn-info'
			}

html见下：

<td class="form-inline" style="width:200%">
                <a style="display:inlint-block" 
                ng-class="isActive(item,'on')" 
                ng-click="switchRuleStatus(item,'on')" 
                ng-disabled="item.status=='on'">on</a>
                <a style="display:inlint-block"  
                ng-class="isActive(item,'sandbox')"
                ng-click="switchRuleStatus(item,'sandbox')"
                ng-disabled="item.status=='sandbox'">sandbox</a>
                <a style="display:inlint-block" 
				ng-class="isActive(item,'off')"
				ng-click="switchRuleStatus(item,'off')"
                ng-disabled="item.status=='off'">off</a>
            </td>

效果见图2-1：

图 2-1 选中的状态变绿，并且不可再点

3.ng-show

表达式为真，则有css display：block的效果；若为假，则有display：hide的效果。

例：

<span class="col-sm-3"  ng-show="config.source!='app'">
	<input type="checkbox" ng-model="config.groupby_clause" value="ip">ip
</span>