Фильтровать массив объектов непосредственно в HTML с помощью выражений

Question

У меня есть AngularJS веб-сайт. Я не могу изменить контроллер, потому что он автоматически генерируется из. NET framework. Это означает, что все мои Angular вещи должны происходить непосредственно в HTML. Теперь к проблеме:

В зависимости от того, что выбрано в раскрывающемся списке, мне нужно отобразить дополнительные данные из этого объекта. Я пытался использовать фильтр канала, но он не работает в выражении {{ }}.

//how my x.Images is defined on the controller - not the actual code
x.Images = [{
  Name: "Funny cat",
  Url: "cat.jpg"
}];

<select ng-options="image.Name as image.Name for image in x.Images" ng-model="x.SelectedImage"></select>

Это дает мне раскрывающийся список:

//bare HTML no Angular
<select>
  <option value="Funny cat">Funny cat</option>
</select>

Теперь давайте скажем, я хочу вывести Url из image:

//won't work because x.SelectedImage is the 'Funny cat' name
<p>Image url: {{ x.SelectedImage.Url }}</p>

//should work but it doesn't
<p>Image url: {{ x.Images.filter(item => item.Name == x.SelectedImage)[0].Url }}</p>

//should work but I guess filter in the {{ }} expression doesn't work?
<p>Image url: {{ x.Images | filter:{Name:x.SelectedImage} }}

Что я могу сделать здесь? Это должно быть сделано через HTML. Я не могу редактировать контроллер или добавлять их как пары ключ / значение, поэтому я могу сделать это:

<p>Image url: {{ x.ImagesAsPair[x.SelectedImage] }}

Большое спасибо

Answer 1

Разобрался. ng-change работает в этом случае.

<select ng-options... ng-change="x.SelectedImageBackup = (x.Images | filter:{Name:x.SelectedItem}:true})"></select>

Работает безупречно