angular-js angular-strap and ng-grid integration?

Question

Say, I've got multiple tabs and I want to use angular-straps to display that. However, the content of each tab is dynamic based on an ajax call for that given tab. Ideally could be derived from the tab id.

| Tab 1 | Tab 2| Tab 3|

So when Tab 1 is clicked, a call to the server is /get/result/tab1_id/ and when Tab 2 is clicked, a call to the server is /get/result/tab2_id etc... And use this result to populate a ng-grid somehow.

Angular has a lot of potential, but I am so new to it and a lot of ways of doing things and I am not good in any. This stuff can be done in jquery in no time with jtable etc.. but I am trying to learn angular js.

So please help.

Thanks & regards Tin

Answer 1

To determine which tab is clicked, you can do

<div data-fade="1" ngModel="activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" data-title="{{tab.title}}" ng-click="loadData()"><p>{{tab.content}}</p></div>
</div>

In the controller, you can do:

$scope.loadData = function(){
    switch(activeTab){
        case 0:
            //load data
            break;

        case 1:
            ....
    }
}

To load data, you can look at $http or $resource module.