Как создать фильтр флажков для списка ng-repeat, используя angularjs?

0

Я пытаюсь создать флажок для списка ng-repeat. Я столкнулся с некоторыми проблемами.

HTML

<input type="text" ng-model="findname" placeholder="Search Name"  />
<ul>
    <li class="no-decoration" ng-repeat="tech in technologyArray">
    <label>
        <input type="checkbox" ng-model="tech.on" />{{tech.u_proffession}}
    </label>
    {{tech.on}}
    </li>
</ul>
<ul>
    <li  ng-repeat="stu in students  | filter:findname | filter:myFunc ">                
        <strong>Name :{{stu.u_name}}</strong><br />
    </li>
</ul>

JS

var ngApp = angular.module('angapp',[]);
ngApp.controller('angCtrl',function($scope,$http){
    $scope.myFunc = function(a) {
    for(tech in $scope.technologyArray){
            var t = $scope.technologyArray[tech];
            if(t.on && a.technology.indexOf(t.u_proffession) > -1){
                return true;   
            }               
        }
    };
    $scope.technologyArray = [{ u_proffession: "developer", on: false}, {u_proffession:"driver", on:false}];
    $http.get("data.php").then(function(response) {
        $scope.students= response.data.records
    });
});

JSON ARRAY

{"records":[{"u_name":"adrian","u_mail":"[email protected]","u_proffession":"developer"},{...}]}

1000 Rows

Простой поиск ng-model="findname" отлично работает, когда я ng-model="findname" фильтр флажка внутри ng-list | filter:myFunc | filter:myFunc. Но когда я добавляю оба из них в ng-list тогда данные, отображаемые в списке student а также текстовый поиск не работают. Я хотел использовать их обоих.

Может ли кто-нибудь вести меня, где я ошибаюсь, что могу исправить свою проблему. Я хотел бы оценить, если кто-то меня поведет. Спасибо.

  • 0
    filter: myFunc - это функция, не должна ли она быть такой, как filter: myFunc ()?
Теги:
angularjs-ng-repeat

1 ответ

2
Лучший ответ

Я определенно не поклонник размещения фильтрующих функций в контроллерах. В этом ключе я бы рекомендовал написать фактический фильтр.

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.technologyArray = [{
      u_proffession: "developer",
      on: false
    }, {
      u_proffession: "driver",
      on: false
    }];
    $scope.students = [{
      "u_name": "adrian",
      "u_mail": "[email protected]",
      "u_proffession": "developer"
    }, {
      "u_name": "adam",
      "u_mail": "[email protected]",
      "u_proffession": "driver"
    }, {
      "u_name": "alex",
      "u_mail": "[email protected]",
      "u_proffession": "developer"
    }, {
      "u_name": "allen",
      "u_mail": "[email protected]",
      "u_proffession": "driver"
    }];
  })
  .filter('customFilter', function() {
    return function(input, techs) {
      if(!techs || techs.length === 0) return input;
      var out = [];
      angular.forEach(input, function(item) {
        angular.forEach(techs, function(tech) {
          if (item.u_proffession === tech.u_proffession) {
            out.push(item);
          }
        });
      });
      return out;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="findname" placeholder="Search Name">
  <ul>
    <li ng-repeat="tech in technologyArray">
      <label>
        <input type="checkbox" ng-model="tech.on">{{tech.u_proffession}}
      </label>
    </li>
  </ul>
  <ul>
    <li ng-repeat="stu in students | filter:{u_name: findname} | customFilter:(technologyArray|filter:{on:true})">
      <strong>Name :{{stu.u_name}}</strong> ({{stu.u_proffession}})
    </li>
  </ul>
</div>
  • 0
    Он работает нормально, так как я хотел, чтобы только одна вещь хотела спросить, что в настоящее время данные отображаются, только когда я фильтрую по флажку, в противном случае ничего не отображается. Так что это возможно, чтобы показать все данные о загрузке страницы.
  • 0
    Я обновил фрагмент. Чтобы показать все элементы при загрузке страницы, просто установите флажки по умолчанию.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню