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

发布时间：2020-12-17 09:09:18 所属栏目：安全来源：网络整理

导读：我希望我没有错过任何明显的doco，如果我有我会确定有人会帮助。我使用asp.net webapi来返回DTO，带有日期字段。这些是使用JSON.Net序列化(格式为’2013-03-11T12：37：38.693′)。我想使用一个过滤器，但在INPUT元素，这是可能的，还是应该创建一个新的过

我希望我没有错过任何明显的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示例。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!