ng-repeat重复元素问题

最新推荐文章于 2020-01-15 17:00:33 发布

醉小义

最新推荐文章于 2020-01-15 17:00:33 发布

阅读量692

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/qq_30638831/article/details/76812098

版权

angularjs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <!--
            ng-repeat解决元素重复:
            语法:
             ng-repeat="index in myScope track by $index "
    -->
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myController',function($scope){
            $scope.myScope = [
                {'name':'aaa'},{'name':'bbb'},{'name':'aaa'},{'name':'ccc'},{'name':'ddd'},{'name':'eee'},{'name':'bbb'}
            ];
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">

    <div ng-repeat="obj in myScope track by $index">
        <!--当为数组有重复时一般报错 需用track by $index 处理  对象没事-->
        <span>{{obj.name}}</span>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myController',function($scope){
            $scope.myScope = {

//            nameArray :[1,1,2,3,4,5,6]
                nameArray:[
                    {'name':'aaa'},{'name':'bbb'},{'name':'aaa'},{'name':'ccc'},{'name':'ddd'},{'name':'eee'},{'name':'bbb'}
                ]
            }


        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">

<div ng-repeat="index in myScope.nameArray track by $index ">
    <!--当为数组有重复时一般报错 需用track by $index 处理  对象没事-->
    <button>{{index}}</button>
</div>



</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script>
        var myapp=angular.module('myapp',[]);
        myapp.controller('test',function($scope){
            $scope.arr=['aa','bb','cc','dd','cc']
            $scope.obj=[
                {'name':'same1'},
                {'name':'same2'},
                {'name':'same3'},
                {'name':'same4'},
                {'name':'same1'}
            ]
        });
    </script>
</head>
<body>


<div ng-app="myapp" ng-controller="test">
    <ol>
        <li ng-repeat="x in arr track by $index">
            <p ng-if="x=='aa'">{{x}} </p>

            <p ng-if="x=='bb'">{{x}}</p>

            <p ng-if="x=='cc'">{{x}}</p>

            <p ng-if="x=='dd'">{{x}}</p>
        </li>
    </ol>

    <ol>
        <li ng-repeat="y in obj" ng-switch on="y.name">
            <p ng-switch-when="same1">{{y.name}}</p>
            <p ng-switch-when="same2">{{y.name}}</p>
            <p ng-switch-when="same3">{{y.name}}</p>
            <p ng-switch-when="same4">{{y.name}}</p>
         </li>
    </ol>
</div>
</body>
</html>