AngularJS: ng-model setter inside ng-repeat

Question

I've found some great answers on how to get the value of an ng-model inside an ng-repeat, but so far, I haven't found any that cover the setter. Suppose I have something like this:

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

If I had a single input box, I'd use something like this:

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

However, that would change the value for every single input box. Is it possible to define the variables and a setter, potentially using arrays? Or is there a better method to get and set input boxes inside an ng-repeat?

Answer 1

The answer by Wayne Ellery does answer the question as it shows "a better method to get and set input boxes inside an ng-repeat".

However if you actually want to use ng-model-options="{getterSetter: true}" within an ng-repeat as is implied in the question and the comments then it's a little more complicated as within your getterSetter function you don't know which item from the ng-repeat is being referred to.

Essentially what you need to do is pass a different getter/setter function for each item, and you can do that by passing a function to ng-model that creates your row specific getter/setter for you.

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

And the 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 here: http://jsfiddle.net/zLg3mLd0/1/

In this case the item titles are of course not stored along with the item objects (if you wanted to do that, just a simple ng-model would suffice) but in the itemTitles map.

Credit to this answer and its comments on which this answer is heavily based.

Answer 2

You would set ng-model to item.title so each object in the array returned from getItems() would contain a title.

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