AngularJS: dynamicznie ładuj widok częściowy do strony

Tworzenie mojej pierwszej aplikacji AngularJS.AngularJS: dynamicznie ładuj widok częściowy do strony

A ng-repeat: er ładuje tytuły. Każdy tytuł jest klikalny. Po kliknięciu tytułu wywołanie ajaxowe powoduje otrzymanie większej ilości danych JSON. Muszę dodać te dane poniżej klikniętego tytułu.

Normalny sposób, chciałbym utworzyć HTML jako ciąg i dołączyć go do kodu źródłowego. Ale ponieważ używam AngularJS, powinien istnieć sposób na stworzenie częściowego widoku z HTML i innym ng-repeat w tym.

Jak można tego dokonać?

Źródło

2013-05-16 user1121487

To brzmi jak dobry mecz dla realizacji trasy na swojej stronie. Spójrz na tę część oficjalnego samouczka programu Angular: http://docs.angularjs.org/tutorial/step_07 i tego dokumentu: http://docs.angularjs.org/api/ng.directive:ngView – mirrormx

Tak, to wydaje się być najlepszym sposobem. Najpierw myślałem o tym, żeby nie korzystać z tras, ale to się uda. Jedna rzecz, której nie rozumiem, to: jak "dołączyć" częściowy widok do innego częściowego widoku? – user1121487

Spójrz na dyrektywę 'ng-include': http://docs.angularjs.org/api/ng.directive:ngInclude. Za jego pomocą można zawrzeć części, które mogą zawierać także "ng-include" - z częściami w częściach i tak dalej. Możesz dynamicznie zmieniać źródło części (ustawiając URL na odwołanie do obiektu, a nie na literał łańcuchowy - jest to pokazane na przykładzie wpisu dokumentacji, który zawarłem). – mirrormx

Oto mały przykład: Twój JSON ma prostą strukturę, z tablicą subItems w obiekcie json każdego przedmiotu.

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>

Źródło

2013-05-16 13:57:03

Dzięki, wydaje się, że to dobre rozwiązanie, ale wolałbym korzystać z częściowych widoków w celu zmniejszenia ilości generowanego kodu HTML, a także lepszej struktury w aplikacji. To może się jednak przydać w innym czasie. – user1121487

W tym celu użyłbym dyrektywy. – Nicolas2bert

użyłbym dyrektywę zgodnie @Nicolas sugestii. Łącząc to z tym, co sugerował @Andrew, możesz zrobić coś takiego.

Kontroler:

.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); 
      }); 
    } 
});

Widok:

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

dyrektywa:

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

Źródło

2016-01-13 11:32:40 perry

AngularJS: dynamicznie ładuj widok częściowy do strony

Odpowiedz

Powiązane problemy