javascript - AngularJS:有没有比指定的更好的方法来实现这一点？

Question

我使用一个生成 Bootstrap 选项卡布局的模板。如下所示:

<div class="a">
    <ul class="nav nav-bar nav-stacked" role="tabs">
        <li><a href="#home"></a></li>
        ...
    </ul>
    <div class="tab-content">
        <div id="home">abc</div>
        ...
    </div>
</div>

现在这是非常简单直接的选项卡导航，可以通过硬编码实现。

我在 ul 的 li 和选项卡内容的 div 上有一个动态的 ng-repeat。

我从 REST 服务获得的 JSON 是包含选项卡数据和要在单个对象内的选项卡内容中显示的内容的东西。例如:

{
    "0": "a": [{ // a- tab data
                   "0": "abc", // abc - data to be displayed inside the tab-content
                   "1": "xyz"
               }]
  ...
}

有了这样的 JSON 层次结构，我基本上需要 ng-repeat 两次。一次用于 ul li，一次用于选项卡内容，因为选项卡的每个对象都包含与其相关的数据。

到目前为止我所做的是:

<div class="a">
    <ul class="nav nav-bar nav-stacked" role="tabs">
        <li ng-repeat="foo in data"><a href="#home">{{foo.name}}</a></li>
        ...
    </ul>
    <div class="tab-content">
        <div id="home" ng-repeat="foo in data">
            <p ng-repeat="f in foo.desc">{{f}}</p>
        </div>
        ...
    </div>
</div>

编辑:所以我的问题是，是否有一种更聪明的方法可以使用单个 ng-repeat 而不是两次执行“foo in data”来实现此目的？

抱歉，如果我的问题不清楚。

Answer 1

使用 ng-include 和 $templateCache 而不是 ng-repeat。例如:

var app = angular.module('foo', []);

function foo($templateCache)
  {
  var model = 
    {"data":
     [
       {"name": "Stack",
        "desc": ["Exchange", "Overflow"]
       }
     ]
    },
    cursor, i, bar = baz = "";
  
  for (i = 0; i < model.data.length; i++)
  	{
    bar = bar.concat("<li>", model.data[i].name,"</li>");
    baz = baz.concat("<li>", model.data[i].desc.join().replace(/,/g,"</li><li>") );
    }
  
  $templateCache.put('name', bar);
  $templateCache.put('desc', baz);      
  }

app.run(foo);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo">
  <ul ng-include="'name'"></ul>
  <ul ng-include="'desc'"></ul>
</div>

引用资料

• Tweak the Angular Test by Controlling the Template

• AngularJS in a Groovy World

• AngularJS Source: templateRequestSpec.js

• AngularJS Source: ngIncludeSpec.js