首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >AngularJS ng-模型-选项getter-setter

AngularJS ng-模型-选项getter-setter
EN

Stack Overflow用户
提问于 2015-01-13 17:39:30
回答 2查看 33.9K关注 0票数 20

我刚刚升级到angular版本1.3.8。

在使用1.2.23版本时,我创建了一个指令来将数据表单视图转换为模型,反之亦然。

这是我的指令:

代码语言:javascript
复制
.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,但我在任何地方都找不到如何同时使用gettersetter的方法。有什么办法可以做到吗?也就是说,ng-model-options可以取代我的转换指令吗?

谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-30 05:30:55

文档可能看起来有点模糊,但用法非常简单。你需要做的是:

  1. HTML:

  • 在JS控制器中,而不是实际的模型,创建一个函数,如果没有发送参数,将返回值(+应用剥离),如果发送了参数,将更新模型(+应用其他更改)。

getter/setters基本上是视图和模型值之间的另一个“层”。

示例:

代码语言:javascript
复制
$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创建为外部化的可重用方法,并为它们创建生成器(因为每种情况下的数据模型都是不同的)。并且在控制器中只调用这些生成器。就我的两分钱。

票数 40
EN

Stack Overflow用户

发布于 2017-06-10 23:41:17

这个问题已经是老生常谈了--但是对于IE9+ (当然还有所有其他相关的浏览器),你可以使用ECMAScript 5的getter/setter方法,相对于ng-model的getterSetter选项,我更倾向于使用这种方法:

代码语言:javascript
复制
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/

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27918987

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档