Question

我找到了一些关于如何在ng-model内获取ng-repeat的价值的好答案，但到目前为止，我还没有找到任何封面二传手。假设我有这样的事情：

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

如果我有一个输入框，我会使用类似this的内容：

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

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

Answer 1

answer Wayne Ellery确实回答了问题，因为它显示“一种更好的方法来获取和设置ng-repeat 中的输入框”。

但是，如果你真的想在ng-model-options="{getterSetter: true}"中使用问题和评论中隐含的ng-repeat那么它会更加复杂，因为你的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及其对此答案的重要评论。

Answer 2

您可以将ng-model设置为item.title，以便从getItems()返回的数组中的每个对象都包含title。

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

AngularJS：ng-repeat中的ng-model setter

2 个答案: