AngularJS：在ng-repeat中使用ng-model设置器

Question

我找到了一些关于如何在ng-repeat中获取ng-model值的好答案，但是迄今为止，我还没有找到任何涵盖setter的答案。 假设我有这样的东西:

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

如果我只有一个输入框，我会使用类似这样的东西：

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

然而，这将改变每个单独输入框的值。是否有可能定义变量和setter，可能使用数组？或者有更好的方法在ng-repeat中获取和设置输入框？

- CJ Harries

Answer 1

Wayne Ellery的答案确实回答了这个问题，因为它展示了“在ng-repeat中获取和设置输入框的更好方法”。

然而，如果你真的想在ng-repeat中使用ng-model-options="{getterSetter: true}"，就像问题和评论中所暗示的那样，那么情况会更加复杂，因为在你的getterSetter函数中，你不知道是哪个ng-repeat项被引用了。

基本上，你需要为每个项目传递一个不同的getter/setter函数，你可以通过向ng-model传递一个函数来为你创建特定于行的getter/setter函数。

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

而且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在这里: http://jsfiddle.net/zLg3mLd0/1/

在这种情况下，项目标题当然不会与项目对象一起存储（如果您想要这样做，只需使用简单的ng-model即可），而是存储在itemTitles映射中。

感谢this answer及其评论，本答案在很大程度上基于它们。

- mluisbrown

Answer 2

您需要将ng-model设置为item.title，这样从getItems()返回的数组中的每个对象都将包含一个title。

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

- Wayne Ellery

---

它之所以这样做是因为对于我的上述代码能够正常工作，数组中的每个项都需要是一个具有标题属性的对象。 - Wayne Ellery

因为它没有回答问题。您引用 item.title，好像他的模型对每个项目都有一个标题，但是他正在询问（通过他的代码澄清），如何在 ng-repeat 中对每个项目使用名为 itemTitle 的 getter/setter，并且没有标题存在。我处于同样的情况。通常情况下，getter/setter 会传递值，但是我们应该如何正确地引用应该分配给它（或从中检索）的对象，因为它不是 $scope 上的绝对引用，而是来自数组的对象？ - rainabba

如果项目上不存在标题，则会创建它，@rainabba。OP说，如果标题在根级别共享，则每个项目的标题都会更改，因此必须在每个项目上放置标题才能避免更改。如果您参考聊天记录，他说他对解决方案感到满意。 - Wayne Ellery

我确实参考了聊天记录，但那里也没有解决方案。事实上，操作员说：“嗯，这样做可以，但结果让我不太满意。”问题仍然存在。 - rainabba

@rainabba，希望我的答案能够一劳永逸地解决这个问题 :) - mluisbrown