Show Tabelle zeigt entsprechend wählen Sie mit dynamischen Optionen ändern

Question

Unten ist meine HTML-Struktur, in der ich Zeilen mit aktiven Status und inaktiven Status entsprechend mit der Auswahl ändern und es funktioniert gut.

Aber jetzt Projektanforderungen sind Änderungen und der Status kann viel mehr getrennt von aktiv und inaktiv sein, so dass ich möchte, dass Optionen entsprechend dem Status der Zeilen erstellt werden und ich bin einige gemeinsame Variable an Zeile statt definieren wie diese ng-hide="transStatus=='inactive'"

table{ 
 
    width:100%; 
 
    border-collapse:collapse; 
 
} 
 
table tr td{ 
 
    padding:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
<div class="transactions_box"> 
 
    <div class="transactions_box_head clearfix"> 
 
     <h2>Transactions</h2> 
 
    </div> 
 
    <div class="transaction_selects"> 
 
     <select class="form-control" ng-init="transStatus==' '" ng-model="transStatus"> 
 
      <option value="">Select Action</option> 
 
      <option value="active">Active</option> 
 
      <option value="inactive">Inactive</option> 
 
     </select> 
 
    </div> 
 
    <div class="transaction_table"> 
 
     <div class="table-responsive"> 
 
      <table cellpadding="0" cellspacing="0" border="1"> 
 
      <thead> 
 
       <tr> 
 
        <th><div class="checkbox"><label><input type="checkbox" ng-model="allCheck"> Transaction ID</label></div></th> 
 
        <th>Date</th> 
 
        <th>Amount</th> 
 
        <th>Status</th> 
 
        <th>Voucher Type</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr ng-hide="transStatus=='inactive'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Active</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='inactive'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Active</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='inactive'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Active</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='inactive'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Active</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='inactive'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Active</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
       <tr ng-hide="transStatus=='active'"> 
 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td> 
 
        <td>18/07/2016 11:25:56</td> 
 
        <td>100.00</td> 
 
        <td>Inactive</td> 
 
        <td>Purchased</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

ich habe eine Plunker einen Ansatz zeigt einen Winkel Controller und Bindungen verwendet wird.

Hier sind die Stücke:

index.html

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>Dynamic Table Filter Select</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <div class="transactions_box"> 
    <div class="transactions_box_head clearfix"> 
     <h2>Transactions</h2> 
    </div> 
    <div class="transaction_selects"> 
     <select class="form-control" ng-options="filter as filter for filter in filterSet" ng-model="selectedFilter"></select> 
    </div> 
    <div class="transaction_table"> 
     <div class="table-responsive"> 
      <table cellpadding="0" cellspacing="0" border="1"> 
      <thead> 
       <tr> 
        <th><div class="checkbox"><label><input type="checkbox" ng-model="allCheck"> Transaction ID</label></div></th> 
        <th>Date</th> 
        <th>Amount</th> 
        <th>Status</th> 
        <th>Voucher Type</th> 
       </tr> 
      </thead> 
      <tbody ng-repeat="row in gridData"> 
       <tr ng-show="row.status===selectedFilter || selectedFilter === filterSet[0]"> 
        <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck "/>{{row.id}}</label></div></td> 
        <td>{{row.date}}</td> 
        <td>{{row.amount}}</td> 
        <td>{{row.status}}</td> 
        <td>{{row.voucherType}}</td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
</div> 
    </body> 

</html> 

app.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.gridData = [ //canned data for now. 
       { 
        id:146319483164316, 
        date:'18/07/2016 11:25:56', 
        amount:100.00, 
        status:'Active', 
        voucherType:'Purchased' 
       }, 
       { 
        id:146319483164316, 
        date:'18/07/2016 11:25:56', 
        amount:100.00, 
        status:'Active', 
        voucherType:'Purchased' 
       }, 
       //... 
       { 
        id:146319483164316, 
        date:'18/07/2016 11:25:56', 
        amount:100.00, 
        status:'Inactive', 
        voucherType:'Purchased' 
       } 
      ]; 

    $scope.filterSet = $scope.gridData.reduce(function(filters, item) { 
    if(filters.indexOf(item.status) === -1) { 
     filters.push(item.status) 
    } 
    return filters; 
    },['Select Action']); 

    $scope.selectedFilter = $scope.filterSet[0]; 
}); 

Meine style.css zu Ihrem CSS identisch ist. Hier ist der Plunker, damit Sie es Vorschau leben können: https://plnkr.co/edit/Y7jbsPWVPXSjAKbb6Kr4?p=preview

So detailliert, was los ist, ich haben die in dem Controller fest einprogrammierten Daten als JavaScript-Objekt für den Moment. Ich nehme an, Sie würden dies aus einer dynamischen Quelle ziehen, wahrscheinlich in JSON, es sollte ziemlich trivial sein, es in ein Javascript-Array zu bekommen. Sobald das ausgefüllt ist, erstelle ich die Filteroptionen. Ich habe (ab) das Array.prototype.reduce verwendet, um ein Array von eindeutigen Werten zu erstellen. Es gibt derzeit keine Sortierung, daher wird es eine Reihenfolge geben, in der die Aufforderung "Aktion auswählen" zuerst angezeigt wird. Es gibt mehrere Möglichkeiten, wie Sie dies tun können, der Punkt besteht darin, über die Daten zu iterieren und Ihr Array von Optionen zu erstellen.

Die meiste Arbeit wird durch die ng-repeat-Direktive und die Zeilenvorlage erledigt. Ich denke, es ist ziemlich selbsterklärend, aber für weitere Informationen können Sie hier klicken:

Sie werden sehen, dass ich Ihre ng-verstecken zu einer ng-Show. Beides hätte funktioniert, aber ich hatte einen Ausdruck vom Typ "not (a) AND not (b)" mit ng-hide. Es ist wirklich eine Stilvorliebe. Was es tut, ist den row.status (gebunden durch die ng-repeat-Direktive) zu nehmen, der $ scope.gridData [x] .status entspricht und prüft, ob er mit dem gebundenen $ scope.selectedFilter übereinstimmt.

Wenn Sie einige der Zustände, neue Dinge zu versuchen, zu ändern, werden Sie sehen, dass sie in der Auswahl Dropdown erscheinen und die Filterung funktioniert wie ohne weitere Änderungen am Code erwartet.

Ein Diskussionspunkt Ich möchte hinzufügen: Wenn Sie mit einem hochvolumigen von Daten vom Server zu tun haben, werden Sie wahrscheinlich wollen Paginierung tun. Wenn ja, werden Sie fast sicher auch Ihre FilterSet generieren und die eigentliche Filterung Server-Seite tun. Ich werde es dabei belassen, weil ich denke, dass es im Rahmen dieser Diskussion nicht möglich ist, es ausführlich zu behandeln, aber es würde sich wesentlich ändern, wie ich das Problem angehen würde.