ng-repeat并不通过我的数组循环

时间:2017-08-16 14:54:34

标签: javascript html angularjs arrays angularjs-ng-repeat

嘿,每个人都可以请某人告诉我这里我做错了什么?

我尝试构建一个包装器,其中我的数组中的每个元素都获得一个和一个id 但是当我通过我的真实数组循环时,我只得到文本错误:错误:[ngRepeat:dupes] ...
使用假阵列,我的作品非常完美。

我的HTML:

    <div class="translaterBox">
        <span ng-repeat="person in persons" id="{{person}}">
            {{person + " "}}
        </span>

        <span ng-repeat="text in textWords" id="{{text}}">
            {{text + " "}}
        </span>
    </div>

我的脚本

var app = angular.module('splitScreenApp', []);
app.controller('splitCtrl', function ($scope, $http) {
    $scope.translatetText = "Translate Here";

    $http.get("getContent.php")
        .then(function (response) {
            var content = response.data.content;
            $scope.content = content;

            function splitContentToWords() {
                var text;
                for(var i = 0; i <= content.length;i++ ){
                    if(content[i].text){
                        var text = content[i].text;
                    }
                    return text.split(' ');
                }

            }
            $scope.persons = [
                'Jack',
                'Jill',
                'Tom',
                'Harvey'
            ];
            $scope.textWords = splitContentToWords();
            console.log($scope.textWords);
            console.log($scope.persons);
        });
});

非常感谢你的帮助

1 个答案:

答案 0 :(得分:4)

当你从Angular得到关于dupes的错误时,这是​​因为有重复的键。您可以使用the documentation中的track by来解决此问题。

尝试将ng-repeat更改为:

<span ng-repeat="person in persons track by $index" id="{{person}}">
<span ng-repeat="text in textWords track by $index" id="{{text}}">