AngularJS: पेज में आंशिक दृश्य लोड गतिशील

Question

मेरी पहली AngularJS अनुप्रयोग बना रहा है।

ए एनजी-दोहराना: एर लोड शीर्षक। प्रत्येक शीर्षक क्लिक करने योग्य है। एक शीर्षक पर क्लिक करते समय, एक AJAX-कॉल अधिक JSON डेटा प्राप्त कर रहा है। मुझे क्लिक किए गए शीर्षक के नीचे यह डेटा जोड़ना होगा।

सामान्य तरीके से, मैं एक स्ट्रिंग के रूप में एचटीएमएल बना सकते हैं और स्रोत कोड से संलग्न होगा। लेकिन चूंकि मैं AngularJS उपयोग कर रहा हूँ, वहाँ HTML और उस में एक और एनजी-दोहराने के साथ एक आंशिक दृश्य बनाने के लिए एक तरह से किया जाना चाहिए।

यह कैसे किया जा सकता है?

Answer 1

यहां एक छोटा उदाहरण है: आपका JSON बस प्रत्येक आइटम के json वस्तु में subItems सरणी के साथ संरचित है,।

जे एस:

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

मैं @Nicolas सुझाव के अनुसार एक निर्देश का प्रयोग करेंगे। इसे एंड्रयू ने सुझाव दिया कि आप इस तरह कुछ कर सकते हैं।

नियंत्रक:

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

दृश्य:

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

निर्देशक:

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