AngularJS: ng-Modell Setter innerhalb ng-Wiederholung

Question

Ich habe einige gute Antworten gefunden, wie man den Wert einer ng-model innerhalb einer ng-repeat bekommen, aber bis jetzt habe ich keine gefunden, die den Setter decken. Angenommen, ich habe so etwas wie dies:

<div ng-repeat="item in getItems()"> 
    <input ng-model="itemTitle" ng-model-options={getterSetter:true}"> 
</div> 

Wenn ich ein einziges Eingabefeld habe ich so etwas wie this verwenden würde:

... 
var _val = ''; 
$scope.itemTitle = function(val){ 
    return angular.isDefined(val) ? (_val = val) : _val; 
} 
... 

jedoch, dass der Wert ändern würde für jedes einzelne Eingabefeld. Ist es möglich, die Variablen und einen Setter zu definieren, die möglicherweise Arrays verwenden? Oder gibt es eine bessere Methode, Eingabefelder innerhalb einer ng-Wiederholung zu erhalten und zu setzen?

Answer 1

Sie würden ng-model auf item.title setzen, so dass jedes Objekt im Array, das von getItems() zurückgegeben wird, eine title enthalten würde.

<div ng-repeat="item in getItems()"> 
    <input type="text" ng-model="item.title"/> 
</div> 

Answer 2

Die answer von Wayne Ellery die Frage nicht beantworten, da es „eine bessere Methode zu bekommen und Eingabefelder innerhalb einer ng-repeat Set“ zeigt.

Allerdings, wenn Sie tatsächlich ng-model-options="{getterSetter: true}" innerhalb eines ng-repeat verwenden möchten, wie in der Frage und die Kommentare impliziert ist, dann ist es ein wenig komplizierter als in Ihrer getterSetter Funktion Sie nicht wissen, welches Element aus der ng-repeat wird Bezug genommen wird.

Im Wesentlichen müssen Sie eine andere Getter/Setter-Funktion für jedes Element übergeben, und Sie können dies tun, indem Sie eine Funktion an ng-model übergeben, die Ihren zeilenspezifischen Getter/Setter für Sie erstellt.

<div ng-app="app" ng-controller="ctrl"> 
    <div ng-repeat='row in items'> 
    <span>{{row.name}}</span> 
    <input type='text' ng-model='createTitleGetterSetter(row.name)' 
     ng-model-options='{ getterSetter: true }' /> 
    </div> 
    <hr/> 
    <pre>{{ itemTitles | json }}</pre> 
</div> 

Und der JS-Code:

var app = angular.module('app',[]); 

app.controller('ctrl', function($scope) { 
    $scope.items = [ 
     {'name': 'a'}, 
     {'name': 'b'}, 
     {'name': 'c'} 
    ]; 

    $scope.itemTitles = {}; 
    $scope.createTitleGetterSetter = function(name) { 
     if (!$scope.itemTitles[name]) { 
      $scope.itemTitles[name] = { 
       getterSetter: function(newValue) { 
         return arguments.length === 0 ? 
         $scope.itemTitles[name].title : 
         $scope.itemTitles[name].title = newValue; 
       }, 
       title: '' 
      } 
     } 

     return $scope.itemTitles[name].getterSetter; 
    }; 
}); 

JSFiddle hier: http://jsfiddle.net/zLg3mLd0/1/

In diesem Fall werden die Artikel Titel natürlich nicht zusammen mit den Elementobjekten gespeichert (wenn Sie das tun wollte , würde einfach eine einfache ng-model genügen) aber in der itemTitles Karte.

Kredit zu this answer und ihre Kommentare, auf denen diese Antwort basiert stark basiert.