Wie binden element mit ng-Modell von einer Objekt-array mit Schlüssel

Dies ist das Szenario,

JS:

angular.module('myApp', [])
.controller('bookCtrl', function($scope) {
    $scope.book = {
        name: 'Session Invites',
        friends: [
             {'id': 1, 'name': 'raju' },
            {'id': 2, 'name': 'radha' },
            {'id': 3, 'name': 'luttappi' },
            ]
    };
    $scope.update = function(){ 
        $scope.book.friends[1] = {'id': 2, 'name': 'sam' };
        alert($scope.book.friends[1].name );
    };
});

HTML:

<div ng-controller="bookCtrl">
    <input type="text" ng-model="book.friends[1].name"/>
    <input type="button" id="btn" name="btn" value="update" ng-click="update()"/>
</div>

Möchte ich nutzen, "id" anstelle von " array "index". fiddle

<input type="text" ng-model="book.friends[1].name"/>
  • Sie können eckig.forEach zu iterieren und dann mit der id nach Durchlaufen des array
  • ich würde gerne binden Sie das array-element direkt mittels ng-model, ist das möglich?
  • Ich glaube nicht, dass seine mögliche.
  • Look at diese Geige
  • Finden Sie diese stackoverflow.com/questions/26741166/...
InformationsquelleAutor CoderHawk | 2015-04-07
  1. 1

    Wird es möglich sein, mit einem for loop aber, ich denke, dass diese Arbeit um unten vielleicht interessant für Sie.

    Ändern Sie einfach die Struktur des JSON, mit Object.proerty anstelle eines Arrays. Wird es nicht die tricks.

    angular.module('myApp', [])
.controller('bookCtrl', function($scope) {
    $scope.book = {
        name: 'Session Invites',
        friends: {
            id1: {'name': 'raju' },
            id2: {'name': 'radha' },
            id3: {'name': 'luttappi' },
        }
    };
    $scope.update = function(){ 
        $scope.book.friends.id1 = {'name': 'sam' };
        alert($scope.book.id1.name );
    };
});

    HINWEIS:
    Es gibt eine Besorgnis über diese Problemumgehung ist die API bietet die JSON. Wenn die empfangenen Daten Struktur fixiert und Winkel brauchen, um zu konvertieren JSON diese Struktur. Möglicherweise müssen Sie bewusst, wie groß ist es den data das gehen umgewandelt werden. Da eine solche Aufgabe wie diese verursachen Memory Leaked dann JavaScript Garbage Collection. Und es wird sich verlangsamen Ihre app deutlich

    • dies scheint ein guter Ansatz. Freunde-Liste ist dynamisch, lassen Sie mich sehen, wie Last, die in diesem format.
    • Yeap, da sind nur besorgt über diese Problemumgehung ist die API bietet die JSON. Wenn die empfangenen Daten Struktur fixiert und Winkel brauchen, um zu konvertieren JSON diese Struktur. Möglicherweise müssen Sie bewusst, wie groß ist es den data das gehen umgewandelt werden. Da eine solche Aufgabe wie diese verursachen Memory Leaked dann JavaScript Garbage Collection. Und es wird sich verlangsamen Ihre app deutlich an. EDIT: ich werde zu aktualisieren, dies in der Antwort für die zukünftige Verwendung.
    InformationsquelleAutor Linh Pham
  2. 2

    Können Sie tun, dass auf diese Weise:

    JS:

    angular.module('myApp', [])
    .controller('bookCtrl', function ($scope) {
    $scope.book = {
        name: 'Session Invites',
        friends: [{
            'id': 1,
                'name': 'raju'
        }, {
            'id': 2,
                'name': 'radha'
        }, {
            'id': 3,
                'name': 'luttappi'
        }]
    };
    $scope.update = function (friend) {

        alert(friend.name);
    };
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="bookCtrl">
    <div ng-repeat="friend in book.friends">
      <input type="text" ng-model="friend.name" />
      <input type="button" id="btn" name="btn" value="update" ng-click="update(friend)" />
    </div>
  </div>
</div>

    • ich möchte vermeiden, ng-repeat, da Textfelder werden platziert an verschiedenen Orten in der form, es ist nicht eine Liste.
    • Wie Sie alle Werte mit einzelnen speichern-button?
    InformationsquelleAutor sylwester
  3. -1

    Können Sie diese stattdessen zu verwenden:

        angular.module('myApp', [])
    .controller('bookCtrl', function($scope) {
    $scope.GetOne={};
        $scope.book = {
            name: 'Session Invites',
            friends: [
                 {'id': 1, 'name': 'raju' },
                {'id': 2, 'name': 'radha' },
                {'id': 3, 'name': 'luttappi' },
                ]
        };
        $scope.update = function(){ 
            $scope.GetOne=$scope.book.friends[1];
            alert($scope.GetOne.name );
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="bookCtrl">
      <input type="text" ng-model="GetOne.name" />
      <input type="button" id="btn" name="btn" value="update" ng-click="update()" />
    </div>
  </div>
    InformationsquelleAutor Sonu Singh
Schreibe einen Kommentar