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

我正在使用

ng repeat

复制

。单击按钮时，会出现一个新的但重复的

元素。问题是用户可以在列表中添加任务，当我复制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>

我试着给所有的id元素一个唯一的id，但这并不能解决这个问题。我还需要'tasks'数组对于

ng repeat

中的每个div元素都是唯一的。有没有办法做到这一点

---

一个简单的例子来说明这个问题：

你对这个概念化的方式有点不对劲——不要考虑复制DOM节点。相反，请考虑修改数据模型，数据模型的每一部分都恰好呈现为不同的DOM节点

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

$scope.tasks

的相同数据）

此处控制器包含

$scope。列出[]

，其中每个元素本身就是一个任务数组：

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 = '';
      };
    }
  };
});

您可以在此处看到这一点：

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

---

不清楚是什么问题或预期结果。请更新这个演示更详细的问题似乎很清楚我。所有元素共享相同的

$scope

，因此它们获得相同的

$scope.tasks

，因此它们包含相同的数据。对于需要单独作用域的数据，不要使用共享控制器；将每个任务列表放在一个具有隔离作用域的指令中，然后在该指令上重复ng。感谢您的提示！你有一个简单的代码来说明如何开始吗？我试过在谷歌上搜索一些，但老实说，这很让人困惑。。。我是angular的新手，以前从未使用过指令。您的主要问题是

任务

应该是

输入的子数组

。然后你把新任务推到合适的子数组中，谢谢！工作就像一个符咒：）现在我只是想知道它为什么工作。我真的很感激！通常，您希望将共享数据和功能放在控制器中，将特定数据/功能放在独立指令中。在第一个示例中，所有列表数据实际上都以嵌套数组的形式存储在控制器中——最好将它们完全分开。我添加了一个单独的例子来证明这一点。

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 = '';
      };
    }
  };
});

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 = '';
      };
    }
  };
});