<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>
다음은 목록의 작업 추가와 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를 부여하려고 시도했지만 이로 인해 잘리지 않습니다. 또한 .NET의 각 div 요소에 대해 고유 한 '작업'배열이 필요합니다 ng-repeat. 이것을 달성하는 방법이 있습니까?
문제를 설명하는 간단한 plunkr : http://plnkr.co/edit/LtWXUG6MKU5TGFTXpWUn?p=preview
이것을 개념화하는 방식은 약간 벗어났습니다. 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 = '';
};
}
};
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다