Question

我需要一些小帮助来完成我的代码。

function testController($scope) {
  console.log('test');
  $scope.cat = {};
  $scope.questions = [{
    "general": false,
    "tag": ["Easy", "Very Easy"],
    "category": ["GK", "Logical"],
    "name": "Question 1"
  }, {
    "general": true,
    "tag": ["Hard", "Easy"],
    "category": ["GK", "Arthimetic"],
    "name": "Question 2"
  }, {
    "general": true,
    "tag": ["Very Easy", "Easy"],
    "category": ["GK", "Arthimetic"],
    "name": "Question 3"
  }];
  $scope.tag = {};
  $scope.cat = {};
  $scope.filterObject = {}
  $scope.applyTag = function() {

  };
  $scope.applyCat = function() {

  };
}

<div ng-app>
  <div ng-controller="testController">
    <h5><input type="checkbox" ng-model="filterObject.general">Filter General</h5>
    <h6>{{filterObject.general}}</h6>
    <h5>Filter By Tag</h5>
    <input type="checkbox" ng-model="tag.hard" ng-change="applyTag()">Hard
    <input type="checkbox" ng-model="tag.easy" ng-change="applyTag()">Easy
    <input type="checkbox" ng-model="tag.veryeasy" ng-change="applyTag()">Very Easy
    <h5>Filter By Category</h5>
    <input type="checkbox" ng-model="cat.GK" ng-change="applyCat()"> GK
    <input type="checkbox" ng-model="cat.Logical" ng-change="applyCat()"> Logical
    <input type="checkbox" ng-model="cat.Arthimetic" ng-change="applyCat()">Artimetic
    <ul>
      <li ng-repeat="question in questions | filter:filterObject">
        {{question.name}}
      </li>
    </ul>
  </div>
</div>

Answer 1

我建议您为自己的应用创建自定义过滤器。

angular.module("myapp", [])
  .controller("testControler", testController)
  .filter("hello", testFilter);

testFilter.$inject = [];

function testFilter() {
  return testFilterFunc;


  function testFilterFunc(questions, filterObject) {
    var filteredQuestions = [];

    if (!filterObject.general && !filterObject.tag.length && !filterObject.category.length) {
      return questions;
    }

    angular.forEach(questions, function(obj) {
      var toPush = false;

      angular.forEach(obj, function(value, key) {
        var filterValue = filterObject[key];

        if (angular.isArray(filterValue)) {
          if (hasAny(value, filterValue)) {
            toPush = true;
          }
        } else {
          if (value == filterValue) {
            toPush = true;
          }
        }
      });

      if (toPush) {
        filteredQuestions.push(obj);
      }
    });
    return filteredQuestions;
  };


  function hasAny(haystack, arr) {
    return arr.some(function(v) {
      return haystack.indexOf(v) >= 0;
    });
  }

}




testController.$inject = [];

function testController() {
  var vm = this;
  vm.questions = [{
    "general": false,
    "tag": ["Easy", "Very Easy"],
    "category": ["GK", "Logical"],
    "name": "Question 1"
  }, {
    "general": true,
    "tag": ["Hard", "Easy"],
    "category": ["GK", "Arthimetic"],
    "name": "Question 2"
  }, {
    "general": true,
    "tag": ["Very Easy", "Easy"],
    "category": ["GK", "Arthimetic"],
    "name": "Question 3"
  }];
  vm.filterObject = {
    tag: ["Very Easy"],
    category: ["GK"],
    general: false
  };

  vm.hasFiltered = hasFiltered;
  vm.filter = applyFilter;

  function hasFiltered(key, value) {
    var filterVals = vm.filterObject[key];
    if (angular.isDefined(filterVals)) {
      if (angular.isArray(filterVals)) {
        return filterVals.indexOf(value) !== -1;
      } else {
        return filterVals == value;
      }
    }
    return false;
  }



  function applyFilter(key, value) {
    if (angular.isDefined(vm.filterObject[key])) {
      if (angular.isArray(vm.filterObject[key])) {
        var idx = vm.filterObject[key].indexOf(value);
        if (idx === -1) {
          vm.filterObject[key].push(value);
        } else {
          vm.filterObject[key].splice(idx, 1);
        }
      } else {
        vm.filterObject[key] = value;
      }
    }
  }
}

查看此JSFiddle以查看此操作

希望这有帮助！

使用angular中的复选框过滤范围变量和字符串的子数组

1 个答案: