Ng-repeat - 如何避免复制 div 的输入内容

Question

我正在使用ng-repeat 复制<div>。单击按钮时，会出现一个新的但重复的<div> 元素。问题是用户可以在列表中添加任务，当我复制 div 时，它也复制了内容。这是我重复的html：

<div class="row">
    <div class="col"  ng-repeat="input in inputs track by $index">
        <div class="task-container">
            <div class="content-task-container">
                <div class="row">
                    <div class="input-field col s10">
                        <input id="task-input-{{$index}}" type="text" ng-model="task">
                        <label for="task-input-{{$index}}">Write task here</label>
                    </div>
                    <div class="btn-add">
                        <a class="btn-floating" id="btn-add-task"><i class="material-icons" ng-click="addTask(task)">add</i></a>
                    </div>
                </div>
                <div class=show-tasks ng-repeat="task in tasks track by $index">
                    <p>
                        <input type="checkbox" id="task-{{$index}}"/>
                        <label for="task-{{$index}}">{{task}}</label>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

这里的控制器既处理列表中任务的添加，又处理 div 元素的复制：

app.controller('listCtrl', function($scope, $routeParams) {
$scope.owner = $routeParams.owner;

$scope.task = "";

$scope.tasks = [];

$scope.addTask = function(task) {
    console.log(task);
    $scope.tasks.push(task);
    $scope.task = "";   
};

$scope.inputCounter = 0;
$scope.inputs = [{
    id: 'input'
}];

$scope.cloneContainer = function() {
    console.log("inside cloneContainer()")
    $scope.inputTemplate = {
        id: 'input-' + $scope.inputCounter,
        name: ''
    };
    $scope.inputCounter += 1;
    $scope.inputs.push($scope.inputTemplate);
};

});

我试图给所有的 id 元素一个唯一的 id，但这并没有减少它。我还需要 'tasks' 数组对于ng-repeat 中的每个 div 元素都是唯一的。有什么办法可以做到这一点？

一个简单的 plunkr 来说明问题：http://plnkr.co/edit/LtWXUG6MKU5TGFTXpWUn?p=preview

Answer 1

您将其概念化的方式有点偏离——不要考虑复制 DOM 节点。而是考虑修改您的数据模型，其中的每个部分恰好呈现为不同的 DOM 节点。

在这种情况下，您将所有数据放入一个共享控制器中，并带有一个“任务”数组；当您尝试创建一个新任务列表时，它最终引用了相同的任务数组，因此似乎是原始列表的副本。 （实际上它是一个单独的列表，但引用了来自$scope.tasks 的相同数据。）

这里的控制器包含$scope.lists[]，每个元素本身就是一个任务数组：

app.controller('MainCtrl', function($scope) {
  $scope.lists = [];
  $scope.addList = function() {
    $scope.lists.push([]); // start each new task list with an empty array
  };
});

app.directive('taskList', function() {
  return {
    scope: {
      mylist: '=taskList' 
    },
    templateUrl: 'tasklist.html',
    link: function(scope) {
      scope.addTask = function() {
        scope.mylist.push(scope.newtask);
        scope.newtask = '';
      };
    }
  };
});

您可以在此处查看此操作：http://plnkr.co/edit/jP3LGacZMox9o55uHffm?p=preview

或者，您可以将任务数据完全保留在控制器之外，并将其仅存储在指令中。 （我倾向于在可能的情况下使用这种方法，仅将控制器用于需要跨多个指令共享的数据或功能）：

app.controller('MainCtrl', function($scope) {
  $scope.lists = [];
  $scope.addList = function() {
    $scope.lists.push(""); // here we only care about the length of the array, its content is irrelevant 
  };
});

app.directive('taskList', function() {
  return {
    templateUrl: 'tasklist.html',
    link: function(scope) {
      scope.mylist = []; // mylist is not passed in from the controller, so init it here. Each instance of the directive will have its own mylist array
      scope.addTask = function() {
        scope.mylist.push(scope.newtask);
        scope.newtask = '';
      };
    }
  };
});

http://plnkr.co/edit/A9JcCoK15Tt7Vzrj35fh?p=preview