Select 未选中所有复选框时的所有元素

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>

Select 未选中所有复选框时的所有元素

Select all elements when all checkboxes unchecked

angularjs

checklist-model