ng-repeat 与空对象 [英] ng-repeat with empty objects

问题描述

我收到中继器重复"错误.我在某处阅读了可以按索引跟踪的内容，但是一旦我这样做了，我的所有对象标题和描述值都会重复.我需要为每个单独的步骤定义唯一的标题、描述和资产数组.我怎样才能做到这一点?

 var stepTemplate = {资产:[]}$scope.item.steps = [stepTemplate];$scope.addRow = function(){$scope.item.steps.push(stepTemplate);$log.debug('行添加')}$scope.deleteRow = 函数(索引){$scope.item.steps.splice(index, 1);$log.debug('行已删除')}$scope.addAsset = 函数(索引){$scope.item.steps[index].assets.push({'type':'textfile'});}$scope.deleteAsset = 函数(索引){$scope.item.steps[index].assets.splice(index, 1);}<div class="row" ng-repeat="step in item.steps"><div class="well"><button class="btn btn-danger pull-right" ng-click="deleteRow($index)">-</button><input type="text" ng-model="step[$index].title" name="{{field}}" class="form-control"><textarea rows="7" ng-model="step[$index].desc" name="{{field}}" class="form-control"></textarea>添加资产<div class="row" ng-repeat="asset in step.assets"><!--asset html -->

<button class="btn btn-primary pull-right" ng-click="addAsset($index)">+</button><button class="btn btn-primary pull-right" ng-click="deleteAsset($index)">-</button>

解决方案

这是因为您每次都将相同的对象实例 (stepTemplate) 添加到数组中.Angular 看到数组有多个条目，但它们都指向同一个对象实例.

这里的解决方案是创建模板的副本，并将副本添加到数组中，而不是模板本身.您可以使用 angular.copy()<创建深度副本/a>.

$scope.addRow = function() {//创建步骤模板的深层副本var newStep = angular.copy(stepTemplate);//如有必要，对其进行任何更新newStep.foo = 'bar';//将新步骤添加到步骤列表中，而不是模板本身$scope.item.steps.push(newStep);};

I'm getting a 'Duplicates in repeater' error. I read somewhere that I can track by index, but as soon as I do that all my object title and description values become duplicated. I need to define unique titles, descriptions and asset arrays for each individual step. How can I do this?

    var stepTemplate = {
        assets:[]
    }
$scope.item.steps = [stepTemplate];


$scope.addRow = function(){
        $scope.item.steps.push(stepTemplate);
        $log.debug('row added')
    }
    $scope.deleteRow = function(index){
        $scope.item.steps.splice(index, 1);
        $log.debug('row deleted')
    }
    $scope.addAsset = function(index){
        $scope.item.steps[index].assets.push({'type':'textfile'});

    }
    $scope.deleteAsset = function(index){
        $scope.item.steps[index].assets.splice(index, 1);

    }




<div class="row" ng-repeat="step in item.steps">
    <div class="well">

        <button class="btn btn-danger pull-right" ng-click="deleteRow($index)">-</button>
        <input type="text" ng-model="step[$index].title" name="{{field}}" class="form-control">
        <textarea  rows="7" ng-model="step[$index].desc" name="{{field}}" class="form-control"></textarea>

            Add Assets
            <div class="row" ng-repeat="asset in step.assets">
               <!--asset html -->
            </div>
        <button class="btn btn-primary pull-right" ng-click="addAsset($index)">+</button>
        <button class="btn btn-primary pull-right" ng-click="deleteAsset($index)">-</button>
    </div> 
</div> 

解决方案

It's because you're adding the same object instance (stepTemplate) to the array each time. Angular sees that the array has multiple entries, but all of them point to the same object instance.

The solution here is to create copies of your template, and add the copies to the array, not the template itself. You can create deep copies using angular.copy().

$scope.addRow = function() {
    // create a deep copy of the step template
    var newStep = angular.copy(stepTemplate);

    // make any updates to it if necessary
    newStep.foo = 'bar';

    // add the new step to the list of steps, not the template itself
    $scope.item.steps.push(newStep);
};

这篇关于ng-repeat 与空对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！