在Angular指令中使用JSON方括号表示法访问值



我有一个JSON对象,它的一些键中包含namespace:key形式的名称空间。因此,我需要使用方括号表示法而不是点表示法来访问其值。

我正在尝试使用一些角度指令/过滤器来处理数据,在本例中,我将使用filter,但这个问题似乎也与指令中使用括号符号有关。

这是我的例子:

ng在HTML中使用筛选器重复:

<ul>
  <li ng-repeat="item in items | filter:{properties['namespace:status']}">
    {{item.name}}
  </li>
</ul>

$scope.items内容:

{
  "properties":{
    "namespace:status":"A",
    "name":"Potato",
    // ...
  },
  // ...
},
{
  "properties":{
    "namespace:status":"B",
    "name":"Carrot",
    // ...
  },
  // ...
},
{
  "properties":{
    // Note that it doesn't contain the namespace attribute
    "name":"Bean",
    // ...
  },
  // ...
}

预期呈现的HTML:

<ul>
  <li>Potato</li>
  <li>Carrot</li>
</ul>

实际结果

Error: [$parse:syntax] Syntax Error: Token '[' is unexpected, expecting [:] at column X of the expression [items | filter:{properties['namespace:status']}] starting at [['namespace:status']}].

指示我查找语法错误。

我的问题是,相同的表达式{{properties['namespace:status']}}确实符合模板中的语法,所以我不确定我做错了什么,或者指令根本无法处理括号表示法。

如果是后者,关于如何在不重写JSON的情况下实现这一点,有什么建议吗?

您应该指定一个类似的对象键

<ul>
  <li ng-repeat="item in items | filter:{prop: properties['namespace:status']}">
    {{item.name}}
  </li>
</ul>

在这里你可以查看http://codepen.io/anon/pen/BslpA

但要知道angularjs不能通过对象属性的数组进行过滤,它只能是数组。

最新更新