[angularjs] 각도 ng-repeat 오류“중계기의 복제는 허용되지 않습니다.”

다음과 같이 사용자 정의 필터를 정의하고 있습니다.

<div class="idea item" ng-repeat="item in items" isoatom>
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
        ....
    </div>
</div>

보시다시피 필터가 사용되는 ng-repeat가 다른 ng-repeat 내에 중첩되어 있습니다.

필터는 다음과 같이 정의됩니다.

myapp.filter('range', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<max; i++)
            input.push(i);
        return input;
    };
});

나는 얻는다 :

오류 : 리피터의 중복은 허용되지 않습니다. 리피터 : item.comments의 주석 | range : 1 : 2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an



답변

해결책은 실제로 여기에 설명되어 있습니다. http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS는 ng-repeat 지시문에서 중복을 허용하지 않습니다. 즉, 다음을 수행하려고하면 오류가 발생합니다.

// This code throws the error "Duplicates in a repeater are not allowed.
// Repeater: row in [1,1,1] key: number:1"
<div ng-repeat="row in [1,1,1]">

그러나 아래의 고유성을 결정하기 위해 색인을 정의하기 위해 위의 코드를 약간 변경하면 다시 작동하게됩니다.

// This will work
<div ng-repeat="row in [1,1,1] track by $index">

공식 문서는 다음과 같습니다. https://docs.angularjs.org/error/ngRepeat/dupes


답변

JSON을 기대하면서도 여전히 같은 오류가 발생하는 경우 데이터를 구문 분석해야합니다.

$scope.customers = JSON.parse(data)


답변

내 프로젝트에서 $ index로 ng-repeat 트랙을 사용하는 데 문제가 있었지만 데이터베이스에서 데이터를 가져올 때 제품에 반영되지 않았습니다. 내 코드는 다음과 같습니다.

<div ng-repeat="product in productList.productList track by $index">
  <product info="product"></product>
 </div>

위의 코드에서 product는 제품을 표시하는 별도의 지시문이지만 범위에서 데이터를 전달할 때 $ index로 인해 문제가 발생한다는 것을 알게되었습니다. 따라서 데이터 손실 및 DOM을 업데이트 할 수 없습니다.

다음과 같이 product.id를 ng-repeat의 키로 사용하여 솔루션을 찾았습니다.

<div ng-repeat="product in productList.productList track by product.id">
  <product info="product"></product>
 </div>

그러나 둘 이상의 제품에 동일한 ID가 있으면 위의 코드가 다시 실패하고 아래 오류가 발생합니다.

angular.js : 11706 오류 : [ngRepeat : dupes] 리피터의 중복은 허용되지 않습니다. 고유 한 키를 지정하려면 ‘추적 기준’표현식을 사용하십시오. 연발총

그래서 마지막으로 아래와 같이 ng-repeat의 동적 고유 키를 만들어 문제를 해결했습니다.

<div ng-repeat="product in productList.productList track by (product.id + $index)">
  <product info="product"></product>
 </div>

이것은 내 문제를 해결했으며 앞으로 도움이되기를 바랍니다.


답변

“범위”필터는 무엇을 하시겠습니까?

여기에 내가 무엇을 작업 예제의 생각 당신이해야 할 노력하고는 : http://jsfiddle.net/evictor/hz4Ep/

HTML :

<div ng-app="manyminds" ng-controller="MainCtrl">
  <div class="idea item" ng-repeat="item in items" isoatom>
    Item {{$index}}
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
      Comment {{$index}}
      {{comment}}
    </div>
  </div>
</div>

JS :

angular.module('manyminds', [], function() {}).filter('range', function() {
    return function(input, min, max) {
        var range = [];
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<=max; i++)
            input[i] && range.push(input[i]);
        return range;
    };
});

function MainCtrl($scope)
{
    $scope.items = [
        {
            comments: [
                'comment 0 in item 0',
                'comment 1 in item 0'
            ]
        },
        {
            comments: [
                'comment 0 in item 1',
                'comment 1 in item 1',
                'comment 2 in item 1',
                'comment 3 in item 1'
            ]
        }
    ];
}


답변

우연히이 오류가 SharePoint 2010 작업시 발생하는 경우 : .json 파일 확장자의 이름을 바꾸고 restService 경로를 업데이트하십시오. 추가로 “$ index by track”이 필요하지 않았습니다.

운 좋게 나는 이 근거에 대한 이 링크 를 전달 받았다 .

.json은 SP2010에서 중요한 파일 형식이되었습니다. SP2010에는 특정 웹 서비스 끝 점이 포함되어 있습니다. 이 파일들의 위치는 14hive \ isapi 폴더입니다. 이 파일의 확장자는 .json입니다. 그것이 그러한 오류를 일으키는 이유입니다.

“json 파일의 내용이 json임을주의하십시오-파일 확장자가 아닙니다”

파일 확장자가 변경되면 모두 설정해야합니다.


답변

이 문제가 다른 사람에게 발생하는 경우 여기에 문서화하고 있는데 실수로 ng-model을 ng-repeat 배열과 동일하게 설정했기 때문에이 오류가 발생했습니다.

 <select ng-model="list_views">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

대신에:

<select ng-model="config.list_view">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

배열을 확인하고 중복이 없었으므로 변수를 다시 확인하십시오.


답변

리피터의 복제는 허용되지 않습니다. 고유 한 키를 지정하려면 ‘추적 기준’표현식을 사용하십시오.

Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="angular.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="personController">
        <table>
            <tr> <th>First Name</th> <th>Last Name</th> </tr>
            <tr ng-repeat="person in people track by $index">
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
                <td><input type="button" value="Select" ng-click="showDetails($index)" /></td>
            </tr>

        </table> <hr />
        <table>
            <tr ng-repeat="person1 in items track by $index">
                <td>{{person1.firstName}}</td>
                <td>{{person1.lastName}}</td>
            </tr>
        </table>
        <span>   {{sayHello()}}</span>
    </div>
    <script> var myApp = angular.module("myApp", []);
        myApp.controller("personController", ['$scope', function ($scope)
        {
            $scope.people = [{ firstName: "F1", lastName: "L1" },
                { firstName: "F2", lastName: "L2" },
                { firstName: "F3", lastName: "L3" },
                { firstName: "F4", lastName: "L4" },
                { firstName: "F5", lastName: "L5" }]
            $scope.items = [];
            $scope.selectedPerson = $scope.people[0];
            $scope.showDetails = function (ind)
            {
                $scope.selectedPerson = $scope.people[ind];
                $scope.items.push($scope.selectedPerson);
            }
            $scope.sayHello = function ()
            {
                return $scope.items.firstName;
            }
        }]) </script>
</body>
</html>