AngularJS: Teilansicht dynamisch in Seite laden

Meine erste AngularJS App erstellen.AngularJS: Teilansicht dynamisch in Seite laden

Ein ng-repeat: er lädt Titel. Jeder Titel ist anklickbar. Wenn Sie auf einen Titel klicken, erhält ein Ajax-Aufruf mehr JSON-Daten. Ich muss diese Daten unter dem angeklickten Titel hinzufügen.

Der normale Weg, würde ich den HTML-Code als Zeichenfolge erstellen und an den Quellcode anhängen. Aber da ich AngularJS verwende, sollte es eine Möglichkeit geben, eine Teilansicht mit dem HTML-Code zu erstellen und einen weiteren ng-repeat darin zu erstellen.

Wie kann das gemacht werden?

Quelle

2013-05-16 user1121487

, das wie ein gutes Spiel für die Umsetzung klingt auf Ihrer Seite von Routing. Sehen Sie sich diesen Teil von Angulars offiziellem Tutorial an: http://docs.angularjs.org/tutorial/step_07 und diesen Dokumentationseintrag: http://docs.angularjs.org/api/ng.directive:ngView – mirrormx

Ja, das scheint der beste Weg zu sein. Ich dachte zuerst darüber nach, keine Routen zu benutzen, aber das wird reichen. Eine Sache, die ich nicht verstehe, ist: Wie "hängst du" eine Teilansicht in eine andere Teilansicht auf? – user1121487

Werfen Sie einen Blick auf die 'ng-include'-Direktive: http://docs.angularjs.org/api/ng.directive:ngInclude. Damit können Sie Partials einschließen, die auch 'ng-include' enthalten können - Teiltöne in Teiltönen und so weiter. Und Sie können die Quelle des Partials dynamisch ändern (indem Sie die URL auf einen Objektreferenz und nicht auf ein String-Literal setzen - das wird im Beispiel des Dokumentationseintrags gezeigt, den ich eingefügt habe). – mirrormx

Hier ist ein kleines Beispiel: Ihr JSON ist einfach strukturiert, mit SubItems-Array im json-Objekt jedes Elements.

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>

Quelle

2013-05-16 13:57:03

Danke, das scheint eine gute Lösung zu sein, aber ich würde lieber Teilansichten verwenden, um die Menge an erzeugtem HTML zu reduzieren, auch eine bessere Struktur in der App. Dies könnte jedoch zu einem anderen Zeitpunkt nützlich sein. – user1121487

Ich würde eine Anweisung verwenden, um das zu tun. – Nicolas2bert

ich eine Richtlinie gemäß @Nicolas Vorschlag verwenden würde. Kombinieren Sie dies mit dem, was Andrew vorgeschlagen hat, könnten Sie so etwas tun.

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

Ausblick:

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

Richtlinie:

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

Quelle

2016-01-13 11:32:40 perry

AngularJS: Teilansicht dynamisch in Seite laden

Antwort

Verwandte Themen