如何在角创建模型的getter-setter方法倒闭？ [英] How do I create closures for model getter-setter in angular?
问题描述
我有一些数据，我采用了棱角分明的NG-重复渲染。我想，以允许用户通过在每个元件的前面检查复选框选择视图中的元素。最简单的事情将是一个'选择'属性添加到模型中的每个元素。不过，我想preFER更精细分离的关注并没有随着用户界面的状态，污染的数据模型。我也正在发送数据到服务器，我想preFER到没有这样做之前，消毒吧。因此，最好的国际海事组织将有一个单独的选择模型。基本上我试图做这样的事情：
I have some data that I render in using angular's ng-repeat. I want to allow the user to select elements in view by checking checkboxes in front of each element. The simplest thing would be to add a 'selected' property to each element in the model. However I'd prefer to separate concerns more finely and not pollute the data model with the state of the UI. Also I'm sending the data back to the server and I'd prefer to not have to sanitise it before doing that. So the best thing IMO would be to have a separate selection model. Basically I'm trying to do something like this:
控制器：
$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 创建一个闭包，将选择状态映射到选择模型正确的元素。当然，这是行不通的，因为角度预计，NG-模型的实际的getter / setter函数。
The idea here is to have createSelectionGetterSetter create a closure that will map the selection state to the correct element in the selection model. Of course it doesn't work because Angular expects an actual getter/setter function in ng-model.
如何创建这样关闭并传递给角视图getter / setter方法？
How do create such closures and pass them to the angular view as getters/setters?
推荐答案
您想可以很容易地使用 $ watchCollection 来定义选择来完成什么变量：
What you want can easily be accomplished using $watchCollection to define the selection variable:
$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/
美中不足的是：一些调整是，如果你想指定选初始值，或希望它保留其值当<所需code>数据的变化。我相信这些都或多或少微不足道的实施。
The catch: Some tweaking is required if you want to specify initial value for the selection or want it to retain its values when the data changes. I believe these are more or less trivial to implement.
如果你想，虽然使用 getterSetter 功能，只需添加 $范围。 选择[名] 您code！
If you want to use the getterSetter feature though, just add $scope.selection[name] to your code!
小提琴： http://jsfiddle.net/qc5qtg5q/
渔获：
-
通过这种方法存取功能不断重建。这可能会对性能（速度和内存使用情况）的影响，至少在真正的页面上。对其进行可视化，在
createSelectionGetterSetter函数的开头添加的console.log（'创建访问'）。
您需要额外处理的情况下，当数据名单的变化，虽然你现在可以轻松地为选择指定的初始值。
You need extra handling for the case when the data list changes, although you can now easily specify initial values for the selection.
这篇关于如何在角创建模型的getter-setter方法倒闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
