AngularJS 使用 ng-view 在 ng-repeat 中渲染不同的模板

Question

很抱歉，我无法提供有关此问题的任何代码 sn-p，我是 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>

到目前为止，我已经为 item.type 的枚举创建了一个模板 html。使用 AngularJS 可以解决这个问题吗？我最近了解到ng-view 伴随着ng-route。

Answer 1

我认为您可以这样做的一种方法是使用“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>

Answer 2

你只能有一个 ng-view，
看看这个answer。

来自documentation for 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， 看看这个answer，了解如何将两者结合起来。

ng-include 创建一个新的子作用域，该作用域又继承自控制器。 请查看answer 以了解有关该主题的更多信息。