Получите доступ к объекту области AngularJS, используя в качестве ключа другой объект области

Question

Я перебираю массив объектов person, используя 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>

Я использую нотацию скобок EMCAScript вместо нотации точек для указания ключа из-за пробелов в именах клавиш number_list (например, "JOHN SMITH"), но из этой интерполяции я ничего не получаю.

Я подтвердил, что если я введу имя, например, {{ number_list['JOHN SMITH'] }} что я могу интерполировать значение - 12 в этом примере. Это означает, что проблема не связана с областью действия или чем-то подобным, насколько я могу судить.

Answer 1

Вы также можете использовать 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>

Answer 2

Вложенная интерполяция с двойными фигурными скобками ({{ }}) не поддерживается платформой 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()];
};