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

Question

我正在复制 <div>通过使用 ng-repeat .单击按钮时，一个新的但重复的 <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>

这是一个 Controller ，它既处理列表中任务的添加，也处理 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，但这并没有成功。我还需要“任务”数组对于 ng-repeat 中的每个 div 元素都是唯一的.有什么办法可以做到这一点？

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

Answer 1

您对此进行概念化的方式有点偏离——不要从复制 DOM 节点的 Angular 考虑。相反，请考虑修改您的数据模型，其中的每个部分恰好呈现为不同的 DOM 节点。

在这种情况下，您将所有数据放入一个共享 Controller 中，使用一个“任务”数组；当你试图创建一个新的任务列表时，它最终引用了同一个任务数组，因此看起来是原始列表的副本。 (实际上它是一个单独的列表，但引用了来自 $scope.tasks 的相同数据。)

这里的 Controller 包含$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

或者，您可以将任务数据完全放在 Controller 之外，只将其存储在指令中。 (我倾向于尽可能支持这种方法，仅将 Controller 用于需要跨多个指令共享的数据或功能):

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