AngularJS: Parçayı sayfaya dinamik olarak yükleme

Question

İlk AngularJS uygulamamı oluşturma.

ng tekrarı: er başlıkları yükler. Her başlık tıklanabilir. Bir başlık tıklandığında, ajax araması daha fazla JSON veri alıyor. Bu verileri tıklanan başlığın altına eklemem gerekiyor.

Normal şekilde, HTML'yi bir dize olarak oluşturabilir ve bunu kaynak koduna ekleyebilirim. Ama ben AngularJS kullanıyorum, HTML ve başka bir ng-yineleme ile kısmi bir görünüm oluşturmanın bir yolu olmalıdır.

Bu nasıl yapılabilir?

Answer 1

İşte küçük bir örnek: JSON'unuz her öğenin json nesnesindeki subItems dizisiyle basitçe yapılandırılmıştır.

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> 

Answer 2

Ben @Nicolas öneri uyarınca bir yönerge kullanmak. Bunu, @Andrew'un böyle bir şey yapabildiğini önerdiği şeyle birleştirmek.

Denetleyici:

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

Görünüm:

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

Yönergesi:

sayfanıza yönlendirme uygulanması için iyi bir maç gibi geliyor

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