menu
more_vert
angularJS中的ng-repeat指令!

作者:dayu

ng-repeat 指令:

ng-repeat 指令用来遍历一个数组重复创建当前元素;

<ul ng-app="myApp" ng-controller="myAppController">
    <li ng-repeat="item in userNames track by $index">{{$index}}:{{item}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller(myAppController,[$scope,function($scope){
    $scope.userNames = {
        "id":1,
        "name":"小三",
        "age":"20"
    };
}]);
</script>

案例二:

<ul ng-app="myApp" ng-controller="myAppController">
    <li ng-repeat="item in datashuju track by $index" data-id="{{item.id}}">{{$index}}:{{item.name}}的年龄是{{item.age}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller(myAppController,[$scope,function($scope){
    $scope.datashuju = [];
    for(var i=0; i<10; ++i){
        //常见写法,不写 i 
        $scope.datashuju[$scope.datashuju.length] = {
            id:i,
            name:赵小黑+i,
            age:20+i
        };
    };
}]);
</script>

在这个例子中,Models中有:

$id:10

item:Objet

$index:1

$first:false

$last:false

$middle:true

$even:false

$odd:true

例如:$first 和 $last的简单使用:

<ul ng-app="myApp" ng-controller="myAppController">
    <li ng-repeat="item in datashuju track by $index" data-id="{{item.id}}">{{$first?‘开始‘:‘‘}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?‘结束‘:‘‘}}</li>
</ul>

ng-repeat结合ng-class实现各行换色

ng-class:会根据当前设置对象的属性和属性值决定是否添加特定的类名:

<ul ng-app="myApp" ng-controller="myAppController">
    <li ng-repeat="item in datashuju track by $index" ng-class="{red:true}" data-id="{{item.id}}">{{$first?‘开始‘:‘‘}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?‘结束‘:‘‘}}</li>
</ul>

实现各行换色:(注意这里用到的是一个大括号)

<ul ng-app="myApp" ng-controller="myAppController">
    <li ng-repeat="item in datashuju track by $index" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}">{{$first?‘开始‘:‘‘}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?‘结束‘:‘‘}}</li>
</ul>

ng-class拓展:结合双向数据绑定,实现选择颜色替换背景:

<style type="text/css">
.red{background:red}
.orange{background: orange;}
.yellow{background: yellow;}
#box{width: 200px; height: 200px;}
</style>
<div ng-app>
<select ng-model=‘color‘>
    <option value="red">red</option>
    <option value="orange">orange</option>
    <option value="yellow">yellow</option>
</select>
<div id="box" ng-class="color"></div>
</div>

ng-repeat 解决重复项,使用 trak by $index

结合 startsWith()做一个筛选:

<ul ng-app="myApp" ng-controller="myAppController">
    <li ng-repeat="item in datashuju track by $index" ng-class="{red:item.startsWith(‘张‘)}">{{item}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller(myAppController,[$scope,function($scope){
    $scope.datashuju = [刘备,关羽,张飞,关兴,张三];
}]);
</script>

结合双向数据绑定使用:

<ul ng-app="myApp" ng-controller="myAppController">
    <input type="text" ng-model="fistName">
    <li ng-repeat="item in datashuju track by $index" ng-class="{red:item.startsWith(fistName)}">{{item}}</li>
</ul>

angularJS中的ng-repeat指令!

原文地址:http://www.cnblogs.com/e0yu/p/7221470.html



Processed Time:0.18388485908508

_REQUEST:
Array
(
    [0] => read
    [1] => 95145
)
_SESSION:
Array
(
    [fid] => 4
)