javascript - 如何激活 Angular 复选框中的过滤功能？

Question

我有带过滤器的 block :

 <form action="">
                    <input type="checkbox" id="inp1">
                    <label for="inp1">All items</label>
                    <input type="checkbox"  id="inp2">
                    <label for="inp2">New today</label>
                    <input type="checkbox" id="inp3">
                    <label for="inp3">New this week</label>
                    <input type="checkbox" id="inp4">
                    <label for="inp4">Free delivery</label>
                </form>

过滤“今天新”和“本周新”:

  $scope.newThisWeek = function(products){
                     $scope.time = (Date.now() - Date.parse(products.add_update_time));

                     if ($scope.time <= 604800000) {
                         return $scope.products;
                     } else {

                         return null;
                     }

                };

                $scope.newToday = function(products){
                       $scope.time = (Date.now() - Date.parse(products.add_update_time));

                       if ($scope.time <= 86400000) {
                           return $scope.products;
                       } else {

                           return null;
                       }
                };

我在那里使用过滤器:

<div class="catalog-item" ng-repeat="product in products |filter:newThisWeek|filter:newToday">
 <a href="{{product.external_url}}" class="item-title">{{ product.name }}</a>
</div>

如何激活 Angular 复选框中的过滤功能？

Answer 1

您需要首先使用 ng-model 属性将 html 中的输入绑定(bind)到 $scope:

..
 <input type="checkbox" id="inp2" ng-model="newTodayActivated">
 <label for="inp2">New today</label>
..other inputs

通过此操作，您可以创建一个 $scope.newTodayActivated 属性，该属性将在复选框状态更改时更新(切换 true/false)。然后您可以在过滤器表达式函数中使用该值:

$scope.newToday = function(products){      
  //use $scope.newTodayActivated - as Boolean here in your logic
  if($scope.newTodayActivated) {
   //do stuff
  } else {
  }
}