javascript - 如何以 Angular 为模型 getter-setter 创建闭包？

Question

我有一些使用 Angular 的 ng-repeat 呈现的数据。我想允许用户通过选中每个元素前面的复选框来选择 View 中的元素。最简单的方法是为模型中的每个元素添加一个“selected”属性。但是，我更愿意更精细地分离关注点，而不是用 UI 状态污染数据模型。此外，我正在将数据发送回服务器，我宁愿在这样做之前不必对其进行清理。因此，IMO 最好的办法是拥有一个单独的选择模型。基本上我正在尝试做这样的事情:

Controller :

$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 创建一个闭包，将选择状态映射到选择模型中的正确元素。当然它不起作用，因为 Angular 期望在 ng-model 中有一个实际的 getter/setter 函数。

如何创建这样的闭包并将它们作为 getter/setter 传递给 Angular View ？

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]' />

参见 fiddle :http://jsfiddle.net/54u0vztr/

问题:如果您想为selection 指定初始值或希望它在data 时保留其值，则需要进行一些调整> 变化。我相信这些实现起来或多或少都是微不足道的。

---

如果您想使用 getterSetter 功能，只需添加 $scope.selection[name]到你的代码!

fiddle :http://jsfiddle.net/qc5qtg5q/

收获:

1. 使用这种方法，可以不断地重新创建访问器函数。这可能会影响性能(速度和内存使用)，至少在实际页面上是这样。要将其可视化，请在 createSelectionGetterSetter 函数的开头添加一个 console.log('Creating accessor')。

2. 您需要对 data 列表更改的情况进行额外处理，尽管您现在可以轻松地为 selection 指定初始值。