Question

我正在开发一个网页，该网页会显示包含多个属性（颜色，大小，样式）的产品列表。我需要在未选中所有复选框时，页面会显示所有产品，当我开始检查其中一个类别时，它会开始过滤产品。这可能与清单模型有关吗？提前致谢

Answer 1

是的，您可以使用清单模型（http://vitalets.github.io/checklist-model/，如果您要重新提供此项）请在下面的代码告诉您如何才能将过滤逻辑添加到其中。

控制器代码

myApp.controller('MyCtrl', function ($scope) {
//On controller load show all the products
$scope.filters = ['color','style','size'];
$scope.allproducts = [];
$scope.selectedFilters = {
    filters: []
};

$scope.applyFilter = function (filters)
{
    //Add filtering logic to filter objects from allproducts 
    //according to filter values in the filters array passed in the function.
    //the data will be changed in if filter applied to allproducts array as allproducts in binded in view.

}


$scope.$watchCollection('$scope.selectedFilters.filters', function (newVal, oldVal) {
    //If all values are unchecked
    if($scope.selectedFilters.filters.length == 0)
    {
        //Show All products
    }
    else {
        //Show the filtered products
        applyFilter($scope.selectedFilters.filters) ;   
       } 
}); });

查看代码：

    <div ng-app="MyApp" ng-controller="MyCtrl">
    <label ng-repeat="filter in filters">
        <input type="checkbox" checklist-model="selectedFilters.filters" checklist-value="filter"> {{filter}}
    </label>
    <label ng-repeat="product in allproducts">{{product}}</label> 
</div>

取消选中所有复选框后，选择所有元素

1 个答案: