Question

我有代码过滤并显示选中框的结果。取消选中所有复选框后，它会显示所有结果，当选中复选框时，它只显示所选的复选框。

但是，我试图在未选中复选框时显示所有结果，如果选中复选框，则表示未显示该特定结果，同时继续显示未选中的复选框。

controller.js

function AdvisorListCtrl( $location, $scope, db) {

    $scope.orderProp = 'number';
    $scope.courseCheckboxes = {};
    $scope.teacherCheckboxes = {};
    $scope.courses = db.courses.query({order:$scope.orderProp, name:$scope.query});

    function getChecked(obj){
        var checked = [];
        for(var key in obj)
            if(obj[key]) checked.push(key);
        return checked;
    }

    $scope.searchFilter = function(row){
        var courChecked = getChecked($scope.courseCheckboxes);
        var teachChecked = getChecked($scope.teacherCheckboxes);
        if (courChecked.length == 0 && teachChecked.length == 0)
            return true;
        else {
            if ($scope.courseCheckboxes[row.name])
                return true;
            else {
                return row.teacher.split(/,\s*/).some(function(teach){
                    return $scope.teacherCheckboxes[teach];
                });
            }
        }

    }
}

HTML

<li><b><h2>Filter by Class</h2></b></li>
<li ng-repeat="course in courses | orderBy:['-status', 'name']">
    <label>
        <input type="checkbox" ng-model="courseCheckboxes[course.name]" />{{course.name}}
    </label>
</li>

Answer 1

我误解了你的问题所以我重新编辑了答案。

当searchFilter（record）返回false时，记录被过滤掉（并且不显示）。

以下是过滤器的一个版本，应该与正在执行的操作相反（隐藏已检查的商家以及包含已检查品牌的商家）。希望这会有所帮助。

<强> HTML

<div ng-repeat="record in records | filter: searchFilter">
{{record.Description}}

<强> JS

$scope.searchFilter = function(row){
  var mercChecked = getChecked($scope.merchantCheckboxes);
  var brandChecked = getChecked($scope.brandCheckboxes);
  if(mercChecked.length == 0 && brandChecked.length == 0)
    return true;
  else{
    if($scope.merchantCheckboxes[row.MerchantName]){
      return false;  // <----------------- changed here true to false
    } else {
      // changed here adding ! 
      return !row.BrandList.split(/,\s*/).some(function(brand){
        return $scope.brandCheckboxes[brand];
      });
    }
  }
};

Angular - 如果取消选中，如何显示结果

1 个答案: