【问题标题】:Angularjs add properties to model with a filter?Angularjs使用过滤器向模型添加属性?
【发布时间】:2017-03-06 21:35:02
【问题描述】:

我有一个时间戳,我想以特定方式对其进行格式化。例如:

今天下午 4:57:30(几秒钟后)

现在,我可以使用过滤器输出时间戳,并让过滤器简单地输出 html。

但是,我宁愿将 html 标签/类保留在模板中,并以某种方式让过滤器修改原始数据,并在模板中调用过滤器后输出一些新属性。

例如,我正在使用 ng-repeat 遍历一组对象,如下所示:

{时间戳:123345236,某事:'asdf'}

我想运行一个过滤器使其看起来像这样:

{timestamp: 123345236, today: 'Today at ', time: '4:57:30pm', relative_time: '(几秒后)'}

然后我可以引用这些新键在我的模板中输出。

这可能吗?

【问题讨论】:

  • 属性是什么意思?能举个例子吗?

标签: angularjs


【解决方案1】:

我认为你需要这样的东西:

app.filter("myFilter",function(){
    return function(input) {
      var arr = [];
      angular.forEach(input, function(value, key){
          value.newCustomProperty = "Custom property" + key;
          this.push(value);
        }, arr);

      return arr;
    }
});

将过滤器应用于 ng-repeat:

<div ng-repeat="i in data | myFilter">

</div> 

DEMO

【讨论】:

  • 这会导致Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!查看日志
  • @Froxz:已更新修复。我们需要确保每次摘要循环运行时都返回相同的数组。谢谢
  • 你能解释一下吗?我在这里有同样的问题:stackoverflow.com/questions/42606743/…
  • @Froxz:请看一下:docs.angularjs.org/error/$rootScope/infdig。我们需要确保我们返回相同的对象,以便 Angular 在摘要运行时不会认为模型发生了变化
  • Khanh,我知道这一点,但我正在寻找一种解决方案,我可以在不运行消化循环的情况下更改元素 css
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-01-24
  • 1970-01-01
  • 1970-01-01
  • 2017-06-24
  • 2015-07-25
  • 1970-01-01
相关资源
最近更新 更多