如何在角度上为模型getter-setter创建闭包？

Question

我有一些数据，我在使用角的ng-重复。我希望允许用户通过选中每个元素前面的复选框来选择视图中的元素。最简单的方法是向模型中的每个元素添加一个“选定的”属性。然而，我更愿意更精细地分离关注点，而不是随着UI的状态而污染数据模型。另外，我正在将数据发送回服务器，我希望在这样做之前不需要对其进行清理。因此，最好是有一个单独的选择模式。基本上，我试着做这样的事情：

主计长：

$scope.data = [
    {'name': 'a', 'value': '1'},
    {'name': 'b', 'value': '2'},
    {'name': 'c', 'value': '3'}
];
$scope.selection = {'a': false, 'b': false, 'c': false};

$scope.createSelectionGetterSetter = function(name) {
    return function(newValue) {
        if (angular.isDefined(newValue)) {
            selection[name] = newValue;
        }
        return selection[name];
    }
};

查看：

<div ng-repeat='row in data'>
   <input type='checkbox' ng-model='createSelectionGetterSetter(row.name)' ng-model-options='{ getterSetter: true }' />
   <input type='text' ng-model='row.value' />
</div>

这里的想法是让createSelectionGetterSetter创建一个闭包，将选择状态映射到选择模型中的正确元素。当然，它不能工作，因为角期望一个实际的getter/setter函数在ng-模型中。

如何创建这样的闭包并将它们作为getter/setter传递到角视图？

Answer 1

可以很容易地使用$watchCollection来定义selection变量来实现您想要的：

$scope.$watchCollection('data', function(newval) {
    $scope.selection = {};
    if( newval ) {
        angular.forEach(newval, function(val) {
            $scope.selection[val.name] = false;
        });
    }
});

并将其用作：

<input type='checkbox' ng-model='selection[row.name]' />

见小提琴：http://jsfiddle.net/54u0vztr/

如果您想为指定初始值，或者希望它在selection更改时保留其值，则需要进行一些调整。我相信这些或多或少都是微不足道的。

但是，如果您想使用$scope.selection[name]特性，只需将getterSetter添加到代码中即可！

小提琴：http://jsfiddle.net/qc5qtg5q/

渔获量：

1. 使用这种方法，访问器函数会不断地被重新创建。这可能会影响性能(速度和内存使用)，至少在真正的页面上是这样。要将其可视化，在console.log('Creating accessor')函数的开头添加一个createSelectionGetterSetter。
2. 当data列表发生变化时，您需要额外的处理，尽管您现在可以轻松地为selection指定初始值。