ng多次重复追加数据

ng-repeat appending data multiple times

本文关键字：追加 数据 ng      更新时间：2023-09-26

HTML

<div ng-app="templeApp" ng-controller="templeList">
                <div ng-repeat="temple in temples track by $index" >
                    <h2>{{temple.strTempleName}}</h2>
                    <h4>{{temple.strTempleDescription}}</h4>
                    <h4>5km from current location</h4>
        </div>  
    </div>

JS

 var templeApp = angular.module('templeApp', [])
.controller('templeList',function($scope,$http){
    $scope.temples = [{"_id":"new","strTempleName":"Temple 1 Name","strTempleDescription":"Temple 1 description","strContactNumber":"+91899999999","strTempleLocation":"Chennai","iTempleRating":5,"strContactPersonName":"","strTempleCoordinates":""}] ;
    $http.get("https://gist.githubusercontent.com/vigneshvdm/d106ea482a792c60dff8/raw/c8f020eb54c4068e40884b8d84c972d92e8e4e08/vicky%20test%20file").success(function(data){
        $scope.temples = data[0];  //uncomment this line to see error
        console.log(data[0]);
    });
});

问题

当我注释$scope.temples = data[0];行时，ne repeat只追加数据一次，但当我将数据分配给$scope.temps时，它多次追加相同的数据

演示链接

删除ng repeat中的track by $index，并像下面的一样更改

在这个例子中，我使用了temple.strTempleName作为track-by-filter，确保它返回唯一的名称。

<div ng-app="templeApp" ng-controller="templeList">
      <div ng-repeat="temple in temples track by temple.strTempleName" >
            <h2>{{temple.strTempleName}}</h2>
            <h4>{{temple.strTempleDescription}}</h4>
            <h4>5km from current location</h4>
      </div>  
  </div>
相关文章：