Aktualisieren Sie Daten nur auf den gefilterten Zustand

Question

Ich habe 3 Schaltflächengruppe, Schaltfläche und Tabelle aktualisieren. ALLE | Dover | Orlando

Beim Laden der Seite werden alle Daten in Tabelle durch Aufruf von api angezeigt.

Mit angularjs Filter habe ich Daten basierend auf Stadt d. H. Dover oder Orlando gefiltert.

Aktuelles Szenario: Wenn Benutzer auf Dover ist und auf Aktualisieren klickt, werden alle Daten erneut geladen, d. H. ALL und Refresh haben denselben API-Aufruf.

Erforderliches Szenario: Wenn sich der Benutzer auf Dover befindet und auf die Schaltfläche zum Aktualisieren klickt, werden nur Dover-Daten aktualisiert.

Code:

  <div class="myrow"> 
       <div class="col-md-6 col-sm-6"> 
        <label for="documentStatus">Queues: </label>      
        <div class="btn-group" role="group" aria-label="..."> 
         <button type="button" class="btn btn-primary active" ng-click="updateData(); myFilter = null">ALL</button> 
         <button type="button" class="btn btn-primary" ng-click="myFilter = {city : 'Dover'}">Dover</button> 
         <button type="button" class="btn btn-primary" ng-click="myFilter = {city : 'Orlando'}">Orlando</button> 
        </div> 
       </div> 
      </div> 

      <div class="container" ng-init="updateData()"> 
       <div class="pull-right"> 
        <button type="button" class="btn btn-primary btn-md" value="Refresh" ng-click="myFilter = null; updateData()"> 
         <span class="glyphicon glyphicon-refresh"></span> Refresh 
        </button> 
       </div> 
       <table class="table table-bordered"> 
        <thead> 
         <tr> 
          <th></th> 
          <th>Queue</th> 
          <th>No of Documents</th> 
          <th>Oldest document Datetime</th> 
          <th>Allocated Users</th> 
         </tr> 
        </thead> 
        <tbody ng-repeat="queue in Queues | filter: myFilter"> 
         <tr> 
          <td> 
           <label class="checkbox-table"> 
            <input type="checkbox" name="checkbox" ng-model="queue.isChecked" id="check-box-{{$index}}"> 
           </label> 
          </td> 
          <td class="col-md-3">{{ queue.queue }}</td> 
          <td class="col-md-2">{{ queue.noOfDocuments }}</td> 
          <td class="col-md-2">{{ queue.oldestDoc}}</td> 
          <td class="col-md-5">{{ queue.allocatedUsers}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 

Answer 1

Sie verwenden angular.copy versuchen können (arr):

var data = { 
     original: myOriginalData, 
     filteredData: angular.copy(myOriginalData) //this is unbind link on the arrayy 
    };