Uso una plantilla que genera un diseño de pestaña de Bootstrap. Como abajo:
abc ...
Ahora bien, esta es una navegación de tabs bastante simple y directa que puede codificarse y lograrse.
Tengo una ng-repeat
dinámica en el li
ul's
y los divs del contenido de la pestaña.
El JSON que obtengo del servicio REST es algo que contiene los datos de las tabs y el contenido que se mostrará dentro del contenido de tabs dentro de un único objeto. Por ejemplo:
{ "0": "a": [{ // a- tab data "0": "abc", // abc - data to be displayed inside the tab-content "1": "xyz" }] ... }
Con una jerarquía JSON así, básicamente necesito ng-repetir dos veces. Una vez para el ul li
y una vez para el contenido de la pestaña, ya que cada objeto de la pestaña contiene los datos relacionados con él.
Entonces, lo que he hecho hasta ahora es:
{{f}}
...
EDITAR: Entonces mi pregunta es, ¿hay una manera más inteligente de lograr esto usando una única ng-repeat
lugar de hacer “foo in data” dos veces?
Lo siento si mi pregunta no está clara.
Use ng-include
con $templateCache
lugar de ng-repeat
. Por ejemplo:
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("", model.data[i].name," "); baz = baz.concat("", model.data[i].desc.join().replace(/,/g," ") ); } $templateCache.put('name', bar); $templateCache.put('desc', baz); } app.run(foo);