Question

我正在学习AngularJs，我到了一个小砖墙......

当我想将项目拆分为标签时，我的模板对于所有标签都是完全相同的，如果ng-repeat中使用的模型，则唯一的小变化，例如：

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="tier6">
        <div ng-include="'partials/vehicles-6-details.html'"></div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tier8">
        <div ng-include="'partials/vehicles-8-details.html'"></div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tier10">
        <div ng-include="'partials/vehicles-10-details.html'"></div>
    </div>
</div>

这样我就必须创建3个确切的文件，模板是：

<ul class="list-unstyled list-inline list-tier">
    <li ng-repeat="tank in tankInfoLevel6" data-sortby="{{playersByTankId[tank].length}}">
        <span class="badge">{{playersByTankId[tank].length}}</span>
        <img ng-src="{{tankInfo[tank].image}}" alt="" class="tank-img"
             pop-over title="Tank fans" fans="tanksFans[tank]" />
        <br><b>{{tankInfo[tank].name_i18n}}</b>
        <br>({{tankInfo[tank].type_i18n}})
    </li>
</ul>

，唯一的变化分别为tankInfoLevel6和tankInfoLevel8 {/ 1}}。

如何使用简单文件？

我试过了：

tankInfoLevel10

以及<div ng-include="'partials/vehicles-details.html'" ng-init="tierTanks = tankInfoLevel6"></div>和onLoad没有任何好结果。

输出显示所有选项卡中的最后一个选项卡内容，因此它似乎加载了所有选项，但是onInclude的最后一个调用覆盖了所有选项卡。

有没有办法让这项工作变得干净利落？

Answer 1

ng-repeat怎么样？

<div ng-repeat="tankItem in tankItems">
    <div ng-include="'partials/vehicles-details.html'"></div>
</div>

在模板中使用tankItem。

Answer 2

这里的指令不会更好，使用属性来传递/引用tankItems列表吗？

将模型传递给包含文件的最佳方法是什么？

2 个答案: