ng-repeat重复元素问题

前端之家收集整理的这篇文章主要介绍了ng-repeat重复元素问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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',function($scope){
            $scope.myScope = {

//            nameArray :[1,1,2,3,4,5,6]
                nameArray:[
                    {'name':'aaa'},{'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>
原文链接:https://www.f2er.com/angularjs/146541.html

猜你在找的Angularjs相关文章