Angular.js表达式:输出转换后的对象属性

包ve

我有这样的数据:

var user = {
  name: 'John Doe',
  property: 'value',
  ranks: [
    {name: 'One', property: 'value'},
    {name: 'Two', property: 'value'}
  ]
}

我想在页面的某处输出所有用户的等级名称,用逗号分隔,如下所示:

<td>John Doe</td>
<td>One, Two</td>

这该怎么做?

纯JavaScript无法正常工作:

<td>{{user.name}}</td>
<td>{{user.ranks.map(function(r) { return r.name }).join(', ')}}</td>

我认为这里应该是Angular过滤器之类的东西,但找不到任何东西。

穆罕默德·塞帕万德(Mohammad Sepahvand)

您不能在模板中编写类似的JS。角度方式将是使用过滤器:

app.filter("usersFilter" , function () {
        return function(user) {
           return user.ranks.map(function(r) { return r.name }).join(', ');
        }
}

并在您的HTML中:

<td>{{ user | usersFilter}}</td>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。光盘

Angular 8-检查后表达式已更改

在 Angular 模板中抽象属性表达式的正确方法

Angular 4:从对象调用正则表达式模式

Angular JS ng-Include表达式

在Angular.js的ngModel中使用表达式

在angular js中将表达式用作ng-class

Angular JS正则表达式替换

Angular JS内联表达式和条件

Angular7 + REDUX:错误:“ ExpressionChangedAfterItHasBeenCheckedError:在检查表达式后,表达式已更改

Angular2-双向绑定错误:检查表达式后,表达式已更改

组件属性取决于当前日期时间时如何管理Angular2“检查后表达式已更改”异常

Angular2表达式+ jQuery

Angular 基本表达式拆分

无法在Angular中调用表达式

Angular指令中的多个“或”表达式

在Angular表达式中嵌套引号

Angular 正则表达式指令

Angular concat 2 表达式

BehaviourSubject 在 Angular 中触发“表达式在检查后发生了变化”

带有ngmodel的Angular 2动态表单示例导致“检查后表达式已更改”

Angular 4-使用NG-IF时出现“检查后表达式已更改”错误

Angular2更改检测“检查后表达式已更改”

检查后Angular2 rc6表达式已更改

Angular2:嵌套* ngFor导致“检查后,表达式已更改”

Angular 4表达式已检查错误后更改

Angular 中的“ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改”错误

将angular2-query-builder查询转换为逻辑表达式

属性中的Angular 1.5组件表达式'undefined'