在输入元素中使用angularjs过滤器

前端之家收集整理的这篇文章主要介绍了在输入元素中使用angularjs过滤器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望我没有错过任何明显的doco,如果我有我会确定有人会帮助。

我使用asp.net webapi来返回DTO,带有日期字段。这些是使用JSON.Net序列化(格式为’2013-03-11T12:37:38.693′)。

我想使用一个过滤器,但在INPUT元素,这是可能的,还是应该创建一个新的过滤器或指令来完成这个?

// this just displays the text value
<input ui-datetime type="text" data-ng-model="entity.date" /> 
// this doesn't work at all
<input ui-datetime type="text" data-ng-model="{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}" /> 
// this works fine
{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}

有没有什么捷径我缺少?

简而言之:如果您希望您的数据在视图和模型中具有不同的表示形式,则需要一个指令,您可以将其视为双向过滤器。

你的指令看起来像

angular.module('myApp').directive('myDirective',function() {
  return {
    require: 'ngModel',link: function(scope,element,attrs,ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

HTML:

<input my-directive type="text" data-ng-model="entity.date" />

这里是一个工作的jsFiddle示例。

原文链接:https://www.f2er.com/angularjs/146920.html

猜你在找的Angularjs相关文章