AngularJS отображает другой шаблон внутри ng-repeat с использованием ng-view

Я хотел бы извиниться за то, что не смог предоставить фрагмент кода по этому вопросу, я новичок в AngularJS.

<div ng-repeat="item in list" ng-view></div>

Используя приведенный выше код, можно ли отобразить другой шаблон, который будет зависеть от свойства item.type. Я ожидал такого результата:

  • item.type == "image" возвращается: <div><img src="'IMAGE_URI'"></div>
  • item.type == "text" возвращается: <div><p>TEXT</p></div>

На данный момент я создал шаблон html для перечисления item.type. Возможна ли эта проблема с использованием AngularJS? Недавно я узнал, что ng-view сопровождается ng-route.


angularjs angularjs-ng-repeat angularjs-routing ng-view
person David B    schedule 21.05.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

У вас может быть только одно ng-представление,
взгляните на этот ответ.

из документации для ng-view:

ngView is a directive that complements 
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.

Every time the current route changes,
the included view changes with it according 
to the configuration of the $route service.

Requires the ngRoute module to be installed.

То, что вам нужно, это ng-include в сочетании с ng-switch, взгляните на этот ответ о том, как их объединить.

ng-include создает новую дочернюю область, которая, в свою очередь, наследуется от контроллера. взгляните на этот ответ для получения дополнительной информации по теме.

person Nitsan Baleli    schedule 21.05.2014
comment
Дополняющий вопрос. Если я использую ng-include, я все еще могу получить доступ к scope, чтобы иметь возможность использовать некоторые функции привязки данных? - person David B; 21.05.2014

arrow_upward
4
arrow_downward

Я думаю, что один из способов сделать это - использовать 'ng-if' для условного включения html:

 <div ng-repeat="item in list">
      <div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
      <div ng-if="item.type == 'text'><div><p>TEXT</p></div>
 </div>
person SomeoneHelpful    schedule 21.05.2014