javascript - 复制要添加到同一数组的最后一个数组对象

标签 javascript arrays angularjs

我希望这很简单。我正在尝试将数组中的最后一个对象再次添加到数组中。

像这样:

arr = [1, 2]

result = [1, 2, 2]

只需使用此代码即可:

    $scope.template = {
        ressource: {
            level: [{
                gain: [],
                cost: []
            }]
        }
    };

    $scope.addLevel = function() {
        var last = $scope.template.ressource.level[$scope.template.ressource.level.length - 1];
        $scope.template.ressource.level.push(last);
    };

但是我收到了这个错误:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: level in template.ressource.level, Duplicate key: object:51, Duplicate value: {"gain":[],"cost":[]}


编辑

所以我尝试了 track by 但我似乎没有得到任何新东西所以这里是我代码的 HTML 部分我使用 gaincost 值:

            <div ng-show="template.type === 'building'" class="vertical-spacing">
            <label>Ressource gain per level</label>

            <ul class="list-group">
                <li ng-repeat="level in template.ressource.level track by $id(level)" 
                    class="list-group-item" 
                    ng-hide="template.ressource.level.indexOf(level) === 0">
                    <span>
                        Level: {{ template.ressource.level.indexOf(level) }}
                    </span>

                    <span class="pull-right">
                        <a href="" ng-click="removeLevel(level)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </span>

                    <ul>
                        <li class="list-group-item" ng-repeat="gain in level.gain track by $id(gain)">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>Amount</label>
                                    <input type="number" 
                                           class="form-control"
                                           ng-model="gain.amount" 
                                           min="1" 
                                           required>
                                </div>

                                <div class="form-group">
                                    <label>Ressource</label>
                                    <select required 
                                            ng-model="gain.ressource" 
                                            ng-init="gain.ressource = gain.ressource || ressources.basic[0]"
                                            ng-options="ressource._id as ressource.name | capitalize for ressource in ressources.basic"
                                            class="form-control selectWidth">
                                        <option style="display:none" value="" disabled>select a ressource</option>
                                    </select>
                                </div>

                                <span class="pull-right">
                                    <a href="" ng-click="removeGain(level, gain)">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </a>
                                </span>
                            </div>
                        </li>
                    </ul>

                    <span>
                        <a href="" ng-click="addGain(level)" ng-hide="(level.gain.length + 1) > ressources.basic.length">
                            <span class="glyphicon glyphicon-plus"></span> Add ressource
                        </a>
                    </span>
                </li>
            </ul>

            <span>
                <a href="" ng-click="addLevel()">
                    <span class="glyphicon glyphicon-plus"></span> Add level
                </a>
            </span>
        </div>

        <div ng-show="template.type === 'building'" class="vertical-spacing">
            <label>Ressource cost per level</label>

            <ul class="list-group">
                <li ng-repeat="level in template.ressource.level track by $id(level)" 
                    class="list-group-item" 
                    ng-hide="template.ressource.level.indexOf(level) === 0">
                    <span>
                        Level: {{ template.ressource.level.indexOf(level) }}
                    </span>

                    <span class="pull-right">
                        <a href="" ng-click="removeLevel(level)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </span>

                    <ul>
                        <li class="list-group-item" ng-repeat="cost in level.cost track by $id(cost)">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>Amount</label>
                                    <input type="number" 
                                           class="form-control"
                                           ng-model="cost.amount" 
                                           min="1" 
                                           required>
                                </div>

                                <div class="form-group">
                                    <label>Ressource</label>
                                    <select required 
                                            ng-model="cost.ressource" 
                                            ng-init="cost.ressource = cost.ressource || ressources.categories[0]"
                                            ng-options="ressource._id as ressource.name | capitalize for ressource in ressources.categories"
                                            class="form-control selectWidth">
                                        <option style="display:none" value="" disabled>select a ressource</option>
                                    </select>
                                </div>

                                <span class="pull-right">
                                    <a href="" ng-click="removeCost(level, cost)">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </a>
                                </span>
                            </div>
                        </li>
                    </ul>

                    <span>
                        <a href="" ng-click="addCost(level)" ng-hide="(level.cost.length + 1) > ressources.categories.length">
                            <span class="glyphicon glyphicon-plus"></span> Add ressource
                        </a>
                    </span>
                </li>
            </ul>

            <span>
                <a href="" ng-click="addLevel()">
                    <span class="glyphicon glyphicon-plus"></span> Add level
                </a>
            </span>
        </div>

错误现在指出:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: level in template.ressource.level track by $id(level), Duplicate key: object:51, Duplicate value: {"gain":[],"cost":[]}

最佳答案

你有一个 Angular 错误。在你的 ng-repeat 中使用 track by

<div ng-repeat="n in template.ressource.level track by $index">

引用

By default, ngRepeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

关于javascript - 复制要添加到同一数组的最后一个数组对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29820164/

相关文章:

javascript - 如何准备 grunt 来使用 app.js 准备 dist 文件夹?

javascript - 鼠标悬停CSS Position绝对div在另一个TD上显示

javascript - 如何使用jquery获取一组元素的最高 "left"值?

javascript - Angular 路由应用程序在本地工作,不在 plunker 上工作 - ui-view 不拉入 View :(

c# - 将 params 关键字与多维数组一起使用

c++ - 大小在运行时确定的数组,这在 C++ 中有效吗?

jquery - 无法使用下拉菜单更改 View 。我能够获得下拉菜单,但单击不会更改 View

javascript - "puff of smoke"效果javascript Sprite 动画

python - Numpy 数组值 "contamination"

javascript - 使用 AngularJS 单击内容选项卡路由到不同页面