Question

我正在使用ng-repeat遍历人员对象数组，说该数组如下所示：

[{
  "display_name": "John Smith",
  "status": "part-time",
  "bio": "I am a person. I do people stuff.",
}, {
  "display_name": "Jane Doe",
  "status": "full-time",
  "bio": "I am yet another person.",
}, ...]

同时，我还有另一个number_list对象，看起来像这样（注意大写）：

{
  "JOHN SMITH": 12,
  "JANE DOE": 34,
  ...
}

在HTML中，我可以像这样从每个人对象进行插值：

<p>
  Person Name: {{ person.display_name }}
  Person Bio: {{ person.bio }}
  ...
</p>

但是我还想从第二个对象进行插值，访问键与我所在的人物对象匹配的值，就像这样：

<p>
  ...
  Person Number: {{ number_list['{{ person.display_name | uppercase }}'] }}
</p>

由于number_list（例如"JOHN SMITH"）的键名中有空格，因此我使用EMCAScript括号表示法而不是点表示法来指定键，但是从插值中我什么也没得到

我已经确认，如果我输入姓名，例如{{ number_list['JOHN SMITH'] }}可以插值-在此示例中为12。就我所知，这意味着该问题与范围或任何类似内容无关。

Answer 1

AngularJS框架不支持带双花括号（{{ }}）的嵌套插值。如果要运行更复杂的代码，应将其设置为控制器方法，然后从视图中调用该方法。

<p ng-repeat="person in persons">
  ...
  ̶P̶e̶r̶s̶o̶n̶ ̶N̶u̶m̶b̶e̶r̶:̶ ̶{̶{̶ ̶n̶u̶m̶b̶e̶r̶_̶l̶i̶s̶t̶[̶'̶{̶{̶ ̶p̶e̶r̶s̶o̶n̶.̶d̶i̶s̶p̶l̶a̶y̶_̶n̶a̶m̶e̶ ̶|̶ ̶u̶p̶p̶e̶r̶c̶a̶s̶e̶ ̶}̶}̶'̶]̶ ̶}̶}̶
  Person Number: {{ ::personNumber(person.display_name) }}
</p>

$scope.personNumber = function(name) {
    return $scope.number_list[name.toUpperCase()];
};

Answer 2

您也可以将filter到personNumber用于对象：

app.controller("ctrl", function($scope){
   $scope.persons = [...];

   $scope.number_list = [...];
})     

app.filter("personNumber", function(){
    return function(array, name){
      return array[name.toUpperCase()];
    }
})

<p ng-repeat="person in persons">
  ...
  Person Number: {{person.display_name | personNumber: number_list}}
</p>

使用其他范围对象作为键访问AngularJS范围对象

2 个答案: