2017-01-02 56 views
0

我在NG-重複項目如何在不觸及重複範圍的情況下將多個項目追加到重複的DOM中?

<div layout="column" 
     class="md-whiteframe-1dp" 
     ng-repeat="item in child.items track by item._id" 
     id={{item._id}}child> 
</div> 

我想多了一個DOM元素(一個更itemToAppend)進入名單追加觸摸內部消除範圍child.items名單。我只想追加相同的外觀DOM元素,但與新的數據。

itemToAppend = {name: "itemToAppend", _id: "111"} 

該怎麼辦? 在此先感謝!:)

+0

我不明白你的question.sorry.can你refrase呢? – Serhiy

+0

您有一個可搜索的組件,並且您希望將某些內容附加到UI組件而不更改父數據集。對?如果是,則創建一個與UI關聯的變量而不是數據。所以假設'var dataset = [...]; var extraOptions = [...]; var uiDataset = dataset.concat(extraOptions)'並將此變量與'ng-repeat'綁定 – Rajesh

+0

您可以添加一個按鈕,並在點擊時編輯新條目 – Codesingh

回答

1

你只需要採取與空數組類型的另一個變量的範圍和推動按鈕點擊的價值。這裏我只是帶了一個文本輸入和按鈕供參考。但你可以用你的方式使用它。下面是代碼示例:

HTML:

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div ng-app="sampleApp"> 
    <div ng-controller="myController"> 
     <input ng-model="newItem" type="text" /> 
     <button ng-click="add(newItem)">Add</button> 
     <div ng-repeat="arr in child"> 
     {{arr}} 
     </div> 
     <div ng-repeat="arr in tempchild track by $index"> 
     {{arr}} 
    </div> 
    </div> 
</div> 
</body> 
</html> 

JS:

(function(angular){ 
    var module = angular.module("sampleApp",[]) 
    .controller("myController", ["$scope", function($scope){ 
    $scope.child = ['A', 'B' , 'C', 'D']; 
    $scope.tempchild = []; 
    $scope.add = function(item) { 
     $scope.tempchild.push(item); 
    }; 
}]); 
})(window.angular); 

正如你可以看到上面的代碼,你將需要採取另一種NG-重複它與新的$ scope變量迭代。

完整的示例,可以發現Here

0

我添加了一個按鈕,可以幫助用戶添加項目。

<input ng-model="newItem" type="text"></input> 
     <button ng-click="add(newItem)">Add</button> 
$scope.itemsInFolder = ["A", "B", "C", "D"]; 
    var newItemsToAdd= $scope.itemsInFolder; 
    $scope.add = function(item) { 
     newItemsToAdd.push(item); 
    }; 

綁定newItemsToAdd與NG-重複

+0

這實際上並沒有幫助。 @Serhiy不想修改scope.child變量。 – Krunal

相關問題