2017-01-02 4 views
0

Ich habe Liste der Elemente in ng-repeatWie man ein weiteres Element an wiederholtes DOM anfügt, ohne ng-repeat scope zu berühren?

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

I whithout berühren child.items Umfang ein weiteres DOM-Element (ein mehr itemToAppend) in der Liste angehängt werden sollen. Ich möchte nur das gleiche DOM-Element anhängen, aber mit neuen Daten.

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

wie geht das? danke im voraus! :)

+0

Ich verstehe nicht, Ihre finden question.sorry.can Sie es refrase? – Serhiy

+0

Sie haben eine durchsuchbare Komponente und möchten etwas an die UI-Komponente anhängen, ohne das übergeordnete Dataset zu ändern. Recht? Wenn ja, erstellen Sie eine Variable, die mit UI anstelle von Daten verknüpft ist. also nehme 'var dataset = [...] an; var extraOptions = [...]; var uiDataset = dataset.concat (extraOptions) 'und binden Sie diese Variable an' ng-repeat' – Rajesh

+0

Sie können eine Schaltfläche hinzufügen und beim Klicken auf make new entry – Codesingh

Antwort

1

Sie haben soeben einen weiteren Anwendungsbereich Variable mit leeren Array-Typ nehmen müssen und den Wert auf die Schaltfläche klicken drücken. Hier habe ich nur eine Texteingabe und einen Knopf als Referenz genommen. Aber Sie können das gleiche auf Ihre Weise verwenden. Unten ist der Code Beispiel:

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); 

Wie Sie oben Code sehen in können, müssen Sie eine andere ng- nehmen Wiederhole, was mit der neuen $ scope-Variable iteriert.

Voll Beispiel kann Here

0

Ich habe eine Schaltfläche hinzugefügt, die Benutzern hilft, Elemente hinzuzufügen.

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

Bind newItemsToAdd mit ng-repeat

+0

Dies hilft nicht wirklich. @Serhiy möchte die Variable scope.child nicht ändern. – Krunal

Verwandte Themen