AngularJS: Esiste un modo migliore per raggiungere questo rispetto a quello specificato?

Question

Uso un modello che genera un layout di scheda Bootstrap. Come di seguito:

<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> 

Ora, questo è abbastanza semplice e lineare la navigazione a schede che possono essere hardcoded e ha raggiunto.

Ho un ng-repeat dinamico su ul'sli e il contenuto della scheda div s.

Il JSON che ottengo dal servizio REST è qualcosa che contiene i dati per le schede e il contenuto da visualizzare all'interno del contenuto della scheda all'interno di un singolo oggetto. Ad esempio:

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

Con tale gerarchia JSON, ho praticamente bisogno di ng-repeat due volte. Una volta per il ul li e una volta per il contenuto della scheda poiché ogni oggetto della scheda contiene i dati ad esso relativi.

Quindi quello che ho fatto finora è:

<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> 

EDIT: Quindi la mia domanda è: esiste un modo più intelligente per raggiungere questo obiettivo utilizzando un unico ng-repeat piuttosto che fare "foo nei dati" due volte?

Scusa se la mia domanda non è chiara.

Answer 1

Utilizzare ng-include con $templateCache anziché ng-repeat. Ad esempio:

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++) 
 
    \t { 
 
    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>

Riferimenti

• Tweak the Angular Test by Controlling the Template

• AngularJS in a Groovy World

• AngularJS Source: templateRequestSpec.js

• AngularJS Source: ngIncludeSpec.js