AngularJS ng-模型-选项getter-setter
AngularJS ng-模型-选项getter-setter
提问于 2015-01-13 17:39:30
我刚刚升级到angular版本1.3.8。
在使用1.2.23版本时，我创建了一个指令来将数据表单视图转换为模型，反之亦然。
这是我的指令：
.directive('dateConverter', ['$filter', function ($filter) {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModelController) {
// Convert from view to model
ngModelController.$parsers.push(function (value) {
return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss')
});
// Convert from model to view
ngModelController.$formatters.push(function (datetime) {
return $filter('date')(datetime, 'MM/dd/yyyy');
});
}
};
}]);})；
我看到here现在支持绑定中的getter和setter，但我在任何地方都找不到如何同时使用getter和setter的方法。有什么办法可以做到吗？也就是说，ng-model-options可以取代我的转换指令吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-30 05:30:55
文档可能看起来有点模糊，但用法非常简单。你需要做的是：
- HTML：
- 在JS控制器中，而不是实际的模型，创建一个函数，如果没有发送参数，将返回值(+应用剥离)，如果发送了参数，将更新模型(+应用其他更改)。
getter/setters基本上是视图和模型值之间的另一个“层”。
示例：
$scope.pageModel.firstName = '';
$scope.pageModel.myGetterSetterFunc: function (value) {
if (angular.isDefined(value)) {
$scope.pageModel.firstName = value + '...';
} else {
return $scope.pageModel.firstName.substr(0,
$scope.pageModel.firstName.lastIndexOf('...')
);
}
}DEMO PLUNKER：http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview
(检查控制台- http://screencast.com/t/3SlMyGnscl)
注意:看看在可重用性方面这个规模会是如何的，这将是很有趣的。我建议将这些getter/setter创建为外部化的可重用方法，并为它们创建生成器(因为每种情况下的数据模型都是不同的)。并且在控制器中只调用这些生成器。就我的两分钱。
Stack Overflow用户
发布于 2017-06-10 23:41:17
这个问题已经是老生常谈了--但是对于IE9+ (当然还有所有其他相关的浏览器)，你可以使用ECMAScript 5的getter/setter方法，相对于ng-model的getterSetter选项，我更倾向于使用这种方法：
var person = {
firstName: 'Jimmy',
lastName: 'Smith',
get fullName() {
return this.firstName + ' ' + this.lastName;
},
set fullName (name) {
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}
person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin此示例来自http://javascriptplayground.com/blog/2013/12/es5-getters-setters/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27918987
复制相关文章
相似问题
腾讯云开发者
