如何激活复选框角度中的过滤功能?

时间:2016-05-13 21:32:31

标签: javascript angularjs

我阻止了过滤器:

 <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>

如何在复选框角度中激活过滤功能?

1 个答案:

答案 0 :(得分:1)

您需要使用 ng-model 属性将html中的输入绑定到$ 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 {
  }
}