AngularJS: seter ng-model wewnątrz powtórzenia ng

Question

Znalazłem kilka świetnych odpowiedzi, jak uzyskać wartość ng-model wewnątrz ng-repeat, ale jak dotąd, nie znalazłem żadnego, który przykryłby setera. Załóżmy, że mam coś takiego:

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

Gdybym miał pole pojedynczego wejścia, chciałbym użyć czegoś takiego this:

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

jednak, że zmiany wartości dla każde pojedyncze pole wprowadzania. Czy możliwe jest zdefiniowanie zmiennych i setera, potencjalnie za pomocą tablic? Czy istnieje lepszy sposób na uzyskanie i ustawić pola wejściowe wewnątrz powtarzania ng?

Answer 1

Użytkownik ustawiłby ng-model na item.title, więc każdy obiekt z tablicy zwrócony z getItems() będzie zawierał title.

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

Answer 2

answer przez Wayne Ellery ma odpowiedzieć na pytanie, jak to pokazuje „lepsza metoda do pobierania i ustawiania pól wejściowych wewnątrz NG-repeat”.

Jednak jeśli rzeczywiście chcesz używać ng-model-options="{getterSetter: true}" ramach ng-repeat jak zakłada się w pytaniu i komentarze to jest to trochę bardziej skomplikowane, jak w ciągu swojej funkcji getterSetter nie wiem, który element z ng-repeat jest mowa.

Zasadniczo musisz przekazać inną funkcję pobierającą/ustawiającą dla każdego elementu, a możesz to zrobić, przekazując funkcję do ng-model, która tworzy dla ciebie twój specyficzny dla wiersza program pobierający/ustawiający.

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

I kod JS:

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 tutaj: nie http://jsfiddle.net/zLg3mLd0/1/

W tym przypadku tytuły pozycji są oczywiście przechowywane wraz z obiektami pozycja (jeśli chcesz to zrobić , wystarczy prosty ng-model), ale na mapie itemTitles.

Kredyt pod numer this answer i jego komentarze, na które w dużej mierze opiera się ta odpowiedź.