2015-12-07 35 views
0

我有這裏的代碼,允許我按類別($ scope.myFilter)過濾我的產品。這工作正常,但我也想增加功能來按公司過濾產品,但似乎我沒有一點幫助就無法做到。按類別和公司使用AngularJS篩選功能

app.controller('AdminController_Music', function ($scope, $filter) { 

var myStore = new store(); 
$scope.currentPage = 0; 
$scope.pageSize = 12; 
$scope.numberOfPages = Math.ceil(myStore.products_sound.length/$scope.pageSize); 

$scope.filteredItems = []; 
$scope.groupedItems = []; 
$scope.pagedItems = []; 

var searchMatch = function (haystack, needle) { 
    if (!needle) { 
     return true; 
    } 
    return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1; 
}; 
$scope.search = function (name) { 
    $scope.filteredItems = $filter('filter')(myStore.products_sound, function (product) { 
     for (var attr in product) { 
      if (searchMatch(product[name], $scope.query)) 
       return true; 
     } 
     return false; 
    }); 
    $scope.currentPage = 0; 
    $scope.groupToPages(); 
}; 
$scope.myFilter = function (column, category) { 
    $scope.filteredItems = $filter('filter')(myStore.products_sound, function (product) { 
     for (var attr in product) { 
      if (searchMatch(product[column], category)) 
       return true; 
     } 
     return false; 
    }); 
    $scope.currentPage = 0; 
    $scope.groupToPages(); 
}; 
$scope.groupToPages = function() { 
    $scope.pagedItems = []; 

    for (var i = 0; i < $scope.filteredItems.length; i++) { 
     if (i % $scope.pageSize === 0) { 
      $scope.pagedItems[Math.floor(i/$scope.pageSize)] = [$scope.filteredItems[i]]; 
     } else { 
      $scope.pagedItems[Math.floor(i/$scope.pageSize)].push($scope.filteredItems[i]); 
     } 
    } 
}; 
// functions have been describe process the data for display 
$scope.myFilter(); 
$scope.search(); 

}); 

我試着玩myFilter函數,但效果不好。

this.products_sound = [ 
     { num: 1, code: '001s', category: 'toy', company:'lego', name: 'lego1', src: "product/1.jpg", description: 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. ', price: 69.99, class: 'show-down' }, 

這是HTML。第二個工程和第一個不...

<ul class="filter group albumFilter"> 
        <p>Brands:</p> 
        <li ng-click="myFilter('company','lego'" >Lego</li> 
        <li ng-click="myFilter('category','construction')" >Construct</li> 
       </ul> 

這是生產版本的代碼。它在Cyrillic,所以不要打擾文字。只需導航到產品循環;排序按鈕是最重要的是:

http://konstantindichev.com/flexfit/

回答

1

看起來你的過濾器無法正常工作。這是可以做到很容易:

$scope.myFilter = function(key, value) { 
    var search = {}; 
    search[key] = value; 

    $scope.filteredItems = $filter('filter')(myStore.products_sound, search); 
    $scope.currentPage = 0; 
    $scope.groupToPages(); 
}; 

您可以通過對象篩選項目(例如$filter('filter')(myStore.products_sound,{company: "lego"});

你可以看到一些例子在這裏:http://voryx.net/using-angularjs-filter-inside-the-controller/

+0

嗨,謝謝我明天早上會試試這個,並檢查這個答案爲接受:) – user1780729

0

我居然固定我的功能爲正常工作打算通過改變它的方式來尋找排序的項目。

$scope.myFilter = function (attribute, string) { 
    $scope.filteredItems = $filter('filter')(myStore.products_sound, function (product) { 
     for (var attr in product) { 
      if (searchMatch(product[attribute], string)) 
       return true; 
     } 
     return false; 
    }); 
    $scope.currentPage = 0; 
    $scope.groupToPages(); 
    }; 
+0

您確定要使用'searchMatch'功能嗎? Angular提供了相同的功能。 – WhiteAngel