angularJS中的ng-repeat指令！

Posted 2020-09-29 帅到要去报警

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>