AngularJS: Есть ли лучший способ добиться этого, чем указанный?

Я использую шаблон, который генерирует макет вкладки 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>

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

У меня есть динамика ng-repeat на ul'sli и содержание вкладки divs.

JSON, который я получаю от службы REST, - это то, что содержит данные для вкладок и контент, который будет отображаться внутри содержимого вкладок в одном объекте. Например:

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

С такой иерархией JSON мне нужно дважды повторить ng. Однажды для 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 в данных" дважды?

Извините, если мой вопрос не ясен.

Источник

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>

Рекомендации

Источник
Другие вопросы по тегам