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

Question

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

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

这是我的例子：

ng-repeat 在 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 的情况下解决这个问题吗？

Answer 1

你应该像这样指定一个对象键

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

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

但是你应该知道，angularjs不能通过对象属性数组过滤，它只能是数组。