關於AngularJs的$filter那點事（菜鳥上路）

標籤：style   blog   http   color   io   資料   for   2014   

現在我們打算用ng的$filter服務來篩選資料

例如現在某後台返回給我們的資料是這樣的：

$scope.data = {                id: "01",                maxDisTkts: 0,                name: "普通區",                seats: [],                tickets:[                    {                        price:30,                        name:"福士單人票",                        fee:null,                        favorableFlg:"N",                        maxTkts:0,                        marketPriceFlg:"N",                        isDiscount:null                    },                    {                        price:30,                        name:"龍卡雙人票",                        fee:null,                        favorableFlg:"N",                        maxTkts:0,                        marketPriceFlg:"N",                        isDiscount:null                    },                    {                        price:30,                        name:"豆瓣",                        fee:null,                        favorableFlg:"N",                        maxTkts:0,                        marketPriceFlg:"N",                        isDiscount:null                    },                    {                        price:100,                        name:"成人票",                        fee:null,                        favorableFlg:"N",                        maxTkts:0,                        marketPriceFlg:"Y",                        isDiscount:null                    }                ]            };

假如我們打算再頁面上顯示各種票的名字（name）跟價格（price），但是資料中的那個“福士單人票”不是我們需要的，所以我們得進行篩選

$scope.fn = function(){               for(var i=0; i<$scope.data.tickets.length;i++){                   if($scope.data.tickets[i].name == ‘福士單人票‘){                       $scope.parent.low= $scope.data.tickets[i].name;                   }               }

              $scope.parent.low= $filter(‘filter‘)($scope.data.tickets,{‘name‘:$scope.parent.test}) 
              console.log("========="); 
              console.log（$scope.parent.low); 
 
           } 

$scope.fn();

chorme控制台下查看到的資料

其實現在得到的資料就跟下面定義的一樣的（下面比較直觀點）。

$scope.parent = {                low:""            };$scope.parent.low = {                price:30,                name:"福士單人票",                fee:null,                favorableFlg:"N",                maxTkts:0,                marketPriceFlg:"N",                isDiscount:null                };

現在我們可以這個條件再進行篩選，然後得到我們的資料

//第一種方式

$scope.f = function(e){               // return e.name != "成人票";                return e.name != $scope.parent.low.name;            };

$scope.datafilter = $filter(‘filter‘)($scope.data.tickets,$scope.f);//第二種方式$scope.datafilter = $filter(‘filter‘)($scope.data.tickets,function(e){return e.name != $scope.parent.low.name;})

console.log($scope.datafilter);

其實我們的第一種方式跟第二種方式是同個道理的，只是表現方式不同。

在Google的控制台可以看到下列資料

這樣我們就得到了我們所要的資料啦，然後我們在頁面上repeat出來

<div ng-repeat=‘t in datafilter‘>    <p>{{t.name}}</p>    <p ng-bind="t.price"></p></div>

其實第二種方式可以變形下，例如下面

$scope.f = function(e){               // return e.name != "成人票";                return e.name != $scope.parent.low.name;            };在html頁面上<div ng-repeat=‘t in datafilter | filter:{‘name‘:f}‘>    <p>{{t.name}}</p>    <p ng-bind="t.price"></p></div>

有聰明的小夥伴就會說，可以試試直接都在頁面上篩選，而不用寫js

但是我只發現了只能篩選出我給出的條件的資料，而過濾不掉給出條件的資料，例如

<div ng-repeat="t in data.tickets | filter{‘name‘:parent.low.name} ">  //或者<div ng-repeat="t in data.tickets | filter:t.name = parent.low.name">    <p>{{t.name}}</p>    <p ng-bind="t.price"></p></div>

這樣就篩選出我們不要的那個資料，顯示在了頁面上。（上面會顯示出“福士單人票”）

有木有聰明的小夥伴告訴我怎樣才能在頁面篩選出我需要的資料，而不用寫js呢？