AngularJS: carica dinamicamente la vista parziale nella pagina

Creazione della prima app AngularJS.AngularJS: carica dinamicamente la vista parziale nella pagina

A ng-repeat: er carichi titoli. Ogni titolo è cliccabile. Quando si fa clic su un titolo, una chiamata ajax sta ottenendo più dati JSON. Ho bisogno di aggiungere questi dati sotto il titolo cliccato.

In modo normale, vorrei creare l'HTML come stringa e aggiungerlo al codice sorgente. Ma dal momento che sto usando AngularJS, ci dovrebbe essere un modo per creare una vista parziale con l'HTML e un'altra ng-repeat in esso.

Come si può fare?

fonte

2013-05-16 user1121487

Che suona come una buona partita per l'attuazione di instradamento nella tua pagina. Dai un'occhiata a questa parte del tutorial ufficiale di Angular: http://docs.angularjs.org/tutorial/step_07 e questa voce di documentazione: http://docs.angularjs.org/api/ng.directive:ngView – mirrormx

Sì, questo sembra essere il modo migliore. Inizialmente pensavo di non usare le rotte, ma lo farò. Una cosa che non capisco è: come si "accoda" una vista parziale in un'altra vista parziale? – user1121487

Dai un'occhiata alla direttiva 'ng-include': http://docs.angularjs.org/api/ng.directive:ngInclude. Con esso puoi includere partial che possono anche avere 'ng-include' in loro - avere partial in partial e così via. Ed è possibile modificare dinamicamente l'origine del partial (impostando l'url su un riferimento a un oggetto piuttosto che su un letterale stringa - è mostrato nell'esempio della voce di documentazione che ho incluso). – mirrormx

Ecco un piccolo esempio: il tuo JSON è strutturato in modo semplice, con la matrice di sottotitoli nell'oggetto json di ogni oggetto.

JS:

function MyCtrl($scope, $http) { 
    $scope.items = [ {id: 'a', subItems: []}, {id: 'b', subItems: []} ]; 

    $scope.getSubItems = function(item) { 
    $http.get('/sub-items/' + item.id).then(function(response) { 
     //Append the response to the current list of subitems 
     //(incase some exist already) 
     item.subItems = item.subItems.concat(repsonse.data); 
    }); 
    }; 
}

HTML:

<div ng-repeat="item in items"> 

    <a ng-click="getSubItems(item)">{{item.id}}</div> 
    <div ng-show="item.subItems.length"> 
    <h4>SubItems:</h4> 
    <ul> 
     <li ng-repeat="subItem in item.subItems">{{subItem}}</li> 
    </ul> 
    </div> 

</div>

fonte

2013-05-16 13:57:03

Grazie, questa sembra una buona soluzione, ma preferirei usare le viste parziali per ridurre la quantità di HTML generato, anche una migliore struttura nell'app. Questo potrebbe tornare utile qualche altra volta però. – user1121487

Vorrei usare una direttiva per farlo. – Nicolas2bert

vorrei usare una direttiva secondo @Nicolas suggerimento. Combinando questo con ciò che @Andrew ha suggerito di poter fare qualcosa di simile.

Controller:

.controller('MainCtrl', function ($scope, $http) { 
    $scope.items = [ 
     {id: 'a', subItems: []}, 
     {id: 'b', subItems: []} 
    ]; 

    $scope.getSubItems = function(id) { 
     $http.get('/sub-items/' + id) 
      .then(function() { 
       $scope.items.subItems = $scope.items.subItems.push(response.data); 
      }); 
    } 
});

Vista:

<div ng-repeat="item in items"> 
    <a ng-click="getSubItems(item)">{{item.id}}</a> 
    <list sub-items="item.subItems"></list> 
</div>

direttiva:

.directive('list', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      subItems: '=subItems' 
     }, 
     template: '<ul>' + 
      '<li ng-repeat="subItem in subItems">{{subItem.id}}</li>' + 
      '</ul>' 
    }; 
});

fonte

2016-01-13 11:32:40 perry

AngularJS: carica dinamicamente la vista parziale nella pagina

risposta

Problemi correlati