Ng-repeat - divの入力内容をコピーしないようにする

Question

を使用して<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を渡しますが、これはそれをカットしません。 ng-repeatの各div要素に固有の 'tasks'配列も必要です。これを達成する方法はありますか？

シンプルplunkr問題を説明するために：あなたはこれを概念化しているhttp://plnkr.co/edit/LtWXUG6MKU5TGFTXpWUn?p=preview

Answer 1

方法は少し離れている - DOMノードを複製するという点ではないと思います。代わりに、あなたのデータモデルを変更するという点で考えると、それぞれの部分は異なるDOMノードとしてレンダリングされます。

この場合、すべてのデータを1つの「タスク」配列を持つ単一の共有コントローラに入れます。新しいタスクリストを作成しようとすると、同じタスク配列を参照して巻き上げられ、元のリストと重複しているように見えます。 （実際には、それは別のリストだったが、$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