基於多維JavaScript對象的AngularJS過濾器

我有一個表格，我輸出很多行數據。在該表中，我有一個列狀態。基於多維JavaScript對象的AngularJS過濾器

約有30個不同的狀態值。該列有一個下拉列表，可按不同的狀態進行過濾，但在下拉列表中只有這些狀態：任何，待定，未激活和已放置。

4個狀態中的每個狀態都有許多不同的狀態值。

如果我創建像這樣一個JavaScript對象：

var statuses = { 
    'Pending': [ 
     'Entered', 
     'Submitted, 
     'Approved' 
    ] 
};

和正在申請後還有另一個陣列非活動具有更多的狀態。

如何在Angular中創建過濾器來顯示結果，而不是從下拉列表的狀態處於掛起狀態，但狀態位於上面的Pending數組中？

來源

2014-10-01 asgwar12

您只需訪問「掛起」的狀態中：

$scope.statuses = statuses;

而且你select內：

<select> 
    <option ng-repeat="options in statuses.Pending">{{options}}</option> 
</select>

JSFiddle

來源

2014-10-01 20:42:19

狀態v線索反映在表格中，並且我試圖讓表格顯示狀態等於下拉菜單中屬於選定值的狀態之一的所有行。這更清楚嗎？用戶選擇Inactive - >代碼檢查Inactive下的所有狀態，顯示其中狀態 - >非活動狀態的行。 – asgwar12 2014-10-01 20:57:06

它們沒有顯示在選項中。 – asgwar12 2014-10-01 21:03:06

爲了填充基於選定表元素，您必須使用select元素中的ng-model來獲取值。爲了確保ng-model變量在每次進行選擇時都能得到它，您可以使用ng-options來填充狀態中的所有選項。如：

<select ng-change='loadStats()' ng-model='selectedStatus' ng-options='k as k for (k,v) in stats'> 
</select>

的ng-change是什麼觸發時作出選擇它調用從該函數的事件控制器的$scope。字符串'k as k for (k,v) in stats'僅用於處理對象並將其作爲（Key，Value）對讀取，然後將該鍵作爲標籤進行打印。

控制器的定義持有$scope變量的loadStats()和其他初始化：

function Ctrl($scope, $http) { 
    $scope.stats = statuses; 
    $scope.table = tableData; 
    $scope.tableShow = $scope.table; 
    $scope.selectedStatus = 'Pending'; 
    $scope.status = $scope.stats[$scope.selectedStatus]; 
    $scope.loadStats = function() { 
     $scope.status = $scope.stats[$scope.selectedStatus]; 
    }; 

}

做出選擇後，來填充你需要定義過濾器的表。篩選器取決於所選狀態的數組和所有行。爲了填充表格，您可以使用一組對象。這個數組也可以幫助我們過濾。假設表的數據表示，如：

var tableData = [ 
{status: 'Entered', value: '1'}, 
{status: 'Entered', value: '2'}, 
{status: 'Submitted', value: '3'}, 
{status: 'Approved', value: '4'}, 
{status: 'A', value: '1'}, 
{status: 'B', value: '2'}, 
{status: 'C', value: '1'}, 
]

現在來填充我們使用的過濾器等被定義表：

var app = angular.module('myApp', []); 
app.filter('filterMyStats',function(){ 
    return function (table, status) { 
     return table.filter(function(row){ 
      if (status.indexOf(row.status) != -1) { 
       return true; 
      } else { 
       return false; 
      } 

     }) 
    } 
});

我們申請使用ng-repeat過濾器：

<tr ng-repeat="tr in tableShow | filterMyStats:status"> 
    <td>{{tr.status}}</td><td>{{tr.value}}</td> 
</tr>

這裏有一個 fiddle

來源

2014-10-02 00:00:54 Unrealist

基於多維JavaScript對象的AngularJS過濾器

回答

相關問題