AngularJS: Aktualisieren von Daten im Blick auf Klick auf Tabs

Question

Ich bin eine komplette Newbee zu Angular so bitte entschuldigen Sie meine Ignoranz!

Ich habe eine Seite, die drei Registerkarten (mit Angular Material für Registerkarten), die eine Liste der Datensätze anzeigen. Jeder Reiter verschiedene Datensätze zu zeigen, hat aber (zB OPEN Tab hat Aufzeichnungen zu zeigen, 'Open' Status hat, hat CLOSED Aufzeichnungen zeigen in 'geschlossenen' Status und so weiter):

<div ng-controller="SomeController as someCtrl"> 
<md-content> 
    <md-tabs> 
     <md-tab id="tab1" > 
      <md-tab-label>OPEN</md-tab-label> 
      <md-tab-body>     
       <div ng-view></div> 
      </md-tab-body> 
     </md-tab> 
     <md-tab id="tab2" md-on-select="someCtrl.showTaskListing('Error')"> 
      <md-tab-label>EXCEPTIONS</md-tab-label> 
      <md-tab-body> 
       <div ng-view></div> 
      </md-tab-body> 
     </md-tab> 
     <md-tab id="tab3" md-on-select="someCtrl.showTaskListing('Closed')"> 
      <md-tab-label>CLOSED</md-tab-label> 
      <md-tab-body> 
       <div ng-view></div> 
      </md-tab-body> 
     </md-tab> 
    </md-tabs> 
</md-content> 
</div> 

Dies ist mein Controller (RequestSenderService ist nur ein Utility Service, der $ hTTP-Operationen verwendet wird, zu tun):

angular 
    .module('SomeModule') 
    .controller('SomeController', someController); 

function SomeController($scope, $location, $http, RequestSenderService) { 

    showTaskListing('Incomplete'); 

    function showTaskListing(status) { 

     var httpResponsePromise = RequestSenderService.sendRequest("/getTasks?status=" + status); 

     httpResponsePromise.then(
      function (response) { 
       setTimeout(function() { 
        $scope.$apply(function() { 
          $scope.tasks = response.data; 
          for (task in this.tasks) { 
           task.isSelected = true; 
          } 
         } 
        ) 
       }, 1000); 
      } 
     ) 
    } 

Dies ist das Routing-config:

angular.module("SomeModule",["ngRoute","ngMaterial"]) 
    .config(function($routeProvider){ 
     $routeProvider 
      .when("/tasks", { 
       templateUrl : "js/tasklist/tasklist.partial.html", 
       controller : "SomeController as someCtrl" 
      }) 
      .when("/addTask", { 
       templateUrl : "js/taskDetails.partial.html", 
       controller : "AnotherController as anotherCtrl" 
      }) 
      .otherwise({ 
       redirectTo : "/tasks" 
      }) 

    }) ; 

Und schließlich das ist meine Vorlage:

<div> 
    <table style="width:100%"> 
     <tr>     
      <th>Task Name</th> 
      <th>Description</th> 
      <th>Type</th> 
     </tr> 

     <tr ng-repeat="task in tasks">     
      <td ng-bind="task.title"></td> 
      <td ng-bind="task.description"></td> 
      <td ng-bind="task.type"></td> 
     </tr> 
    </table> 
</div> 

Jetzt, wenn ich das Laden der Seite (/ Tasks) Daten Lasten auf der ersten Registerkarte in Ordnung, aber es lädt die gleichen Daten auf beiden anderen Registerkarten, wie gut und obwohl ich md-on-select auf jeder der Zungen gegeben und Die Funktion wird korrekt aufgerufen, aber die Daten werden auf der Seite nicht aktualisiert.

Kann jemand bitte helfen? Vielen Dank.

Answer 1

Hallo, ich sah sie nur an einem Winkelmaterial Tab Demo und modifiziert es auf Ihre Bedürfnisse, Hier ist die link

Sie müssen nur

$scope.selectedTab = function(index) { 
    // your httpResponsePromise 
} 

ändern sollte es funktionieren, einfach ignorieren die CSS Teil es nur Code aus eckigen Material Demo kopiert, müssen Sie nur Ihre HTML und JS die Art und Weise, die ich habe.

Grundsätzlich md-on-select ist ein Ausdruck ausgewertet auf einen Klick und kein Ereignishandler. also müssen Sie md-on-select="result = selectedTab()" speichern und dann in Ihre Vorlage einfügen.