Angular Update-Objekt in Array

Ich möchte ein Objekt in einem Objekt-Array zu aktualisieren. Gibt es eine andere Möglichkeit als über alle Elemente zu iterieren und die passende zu aktualisieren? Der aktuelle Code sieht wie folgt aus:Angular Update-Objekt in Array

angular.module('app').controller('MyController', function($scope) { 
    $scope.object = { 
     name: 'test', 
     objects: [ 
      {id: 1, name: 'test1'}, 
      {id: 2, name: 'test2'} 
     ] 
    }; 

    $scope.update = function(id, data) { 
     var objects = $scope.object.objects; 

     for (var i = 0; i < objects.length; i++) { 
      if (objects[i].id === id) { 
       objects[i] = data; 
       break; 
      } 
     } 
    } 
});

Quelle

2014-11-04 Dominik Barann

Was die Ansicht aussehen wird? Wenn Sie einen Verweis auf das Objekt haben, an dem Sie 'update()' aufrufen, übergeben Sie das Objekt anstelle der ID. –

zu Anthony's Vorschlag hinzufügen .. 'ng-click =" update (obj, data) "' anstelle von 'ng-click =" update (obj.id, data) " –

Wollen Sie auch die ID vorher überprüfen? hinzufügen? Ich glaube, das ist in Ihrem Fall nicht nötig? – Asik

Es gibt mehrere Möglichkeiten, dies zu tun. Ihre Situation ist nicht sehr klar.

-> Sie können Index statt ID übergeben. Dann wird Ihre Update-Funktion wie:

$scope.update = function(index, data) { 
    $scope.object.objects[index] = data; 
};

-> Sie können ng-repeat auf Ihrer Ansicht und binden Objekteigenschaften Eingabeelemente verwenden.

<div ng-repeat="item in object.objects"> 
    ID: <input ng-model="item.id" /> <br/> 
    Name: <input ng-model="item.name" /> <br/> 
</div>

Quelle

2014-11-04 17:44:41

Hinzugefügt einen Plünderer unter –

Wenn Sie versuchen, durch ID zu aktualisieren, dann entspricht Index nicht unbedingt ID. Sie können mit dem falschen Datensatz enden. – Sam

Ihre Plunker abgehend, würde ich dies tun:

ändern

<a href="javascript:;" ng-click="selectSubObject(subObject.id)">Edit</a>

<a href="javascript:;" ng-click="selectSubObject($index)">Edit</a>

dann den Array-Index verwenden, um zu sein in Ihrem $scope.selectSubObject Methode, um direkt auf Ihr gewünschtes Element zuzugreifen. Etwas wie folgt aus:
```
$scope.selectSubObject = function(idx) { 
    $scope.selectedSubObject = angular.copy(
    $scope.selectedMainObject.subObjects[idx] 
); 
}; 
```

Wenn Sie jedoch nur haben die id weg von gehen, dann können Sie den Winkelfilterservice auf dem id zu filtern, die Sie wollen. Aber das wird immer noch eine Schleife machen und über das Array im Hintergrund iterieren.

Siehe angularjs Dokumentation für ngrepeat, um die Variablen zu sehen, die es verfügbar macht.

Quelle

2014-11-05 14:23:34 tokafew420

Beachten Sie, dass eckig.Kopieren erstellt ein neues Objekt, so dass Sie keine 2-Wege-Bindung erhalten, für die eckig wirklich nützlich ist. Wenn Sie das Hauptobjekt mit seinen Änderungen aktualisieren, dann ist die angular.copy nicht notwendig. –

Ja, es ist besser, den Index anstelle der ID zu verwenden, aber das Problem ist immer noch das gleiche. Ich muss das Objekt in meinem Hauptobjekt aktualisieren und weiß nicht wirklich, wie man das macht, weil ich den Index nicht kenne. Ich benutze die Kopiermethode, weil der Benutzer zurückgehen kann, ohne die Änderungen zu speichern. Wenn ich mich auf das reale Objekt beziehe, werden alle Änderungen gespeichert, ohne die Speichern-Taste zu drücken. Mein Problem ist die Speichermethode meines SubObjectControllers. Eine Gabel hinzugefügt http://plnkr.co/edit/YcPMe0uFWFNgDpZddjt6?p=preview –

Wenn das Ziel ist, über das Array nicht Schleife und Sie haben den Index nicht, dann ist das nicht möglich. Wie bereits erwähnt, können Sie den angularen [$ filter service] (https://docs.angularjs.org/api/ng/filter/filter) verwenden, um Ihr Array zu filtern, aber dies führt zu einer Schleife unter den Covern. Beispiel für die Verwendung des $ -Filterdienstes: '$ filter ('filter') ($ scope.selectedMainObject_Objects, {id: $ scope.selectedSubObject.id)'. Eine andere Option (was ich tun würde) ist, die Implementierung neu zu gestalten, um den Index zu sparen. Ich habe Ihren Plünderer aktualisiert, um den Index zu speichern: http://plnkr.co/edit/5udyU3o1AR5z5dP1ReFJ?p=preview – tokafew420

Filter, die dabei helfen, das Element aus dem Array zu finden, können auch verwendet werden, um das Element im Array direkt zu aktualisieren. Im folgenden Code [0] -> wird direkt auf das Objekt zugegriffen.

Plunker Demo

$filter('filter')($scope.model, {firstName: selected})[0]

Quelle

2015-05-14 14:26:25 Abhijeet

Geben Sie die Artikel Ihrer Update-Methode. Werfen Sie einen Blick auf Beispiel unten.

function MyCtrl($scope) { 
 
    $scope.items = 
 
    [ 
 
     {name: 'obj1', info: {text: 'some extra info for obj1', show: true}}, 
 
     {name: 'obj2', info: {text: 'some extra info for obj2', show: false}}, 
 
    ]; 
 
    $scope.updateName = function(item, newName){ 
 
    item.name = newName; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app> 
 
    <table ng-controller="MyCtrl" class="table table-hover table-striped"> 
 
    <tr ng-repeat="x in items"> 
 
     <td> {{ x.name }}</td> 
 
     <td> 
 
      <a href="#" ng-show="!showUpdate" ng-click="someNewName = x.name; showUpdate = true">Update</a> 
 
      <div ng-show="showUpdate" ><input type="text" ng-model="someNewName"> <input type="button" value="update" ng-click="updateName(x, someNewName); showUpdate = false;"></div> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 
</body>

Quelle

2015-09-12 14:26:25 Artiom

das löste mein Problem. – prudhvi259

Angular Update-Objekt in Array

Antwort

Verwandte Themen