Как фильтровать данные JSON с помощью AngularJS?

Question

У меня есть три коробки dropdown. Мне нужно отфильтровать данные и их нужно отобразить в таблице на основе моего выбора флажка (либо с single checkbox, либо two checkboxes или three checkboxes).

Я выполнил следующее, но если мы четко это увидим, я не смогу правильно фильтровать данные, используя AngularJS.

Нравится:

a. Он должен работать для individual checkbox selection: означает, что если я выберу single checkbox либо с Name, либо Description или Field4, то соответствующие сопоставленные отфильтрованные данные должны отображаться в таблице, в противном случае не должны отображаться какие-либо данные (т. Е. Если они не соответствуют нашим выбор флажка означает, что он не отобразит никаких данных)

b. Он должен работать для multiple(two) checkbox selection: значит, если выбрать любые несколько флажков, как любой one from Nameone from Description и orone from Description и one from Field4orone from Field4 и one from Name, то соответствующие согласованные отфильтрованные данные должны отображаться в таблице, в противном случае оно не должно отображаться никаких данных (т.е. если он не соответствует нашему выбору флажка, он не отображает никаких данных)

c. Он должен работать для multiple(three) checkbox selection: означает, что если я выберем три флажка, такие как one from Name и one from Description и one from Field4, тогда соответствующие соответствующие отфильтрованные данные должны отображаться в таблице, в противном случае не должны отображаться какие-либо данные (т. Е. Если они не соответствуют нашим выбор флажка означает, что он не отображает никаких данных)

Он работает нормально в первый раз checkbox Выбор только, означает: после загрузки вышеуказанного кода/приложения, если мы имеем check любой из указанных выше вариантов (например, независимо от того, single checkbox выбор или two checkbox выбор или three checkbox выбор), тогда он работает нормально, позже он не работает (значит, если мы uncheck выше любых критериев, а затем, если мы выберем любой checkbox снова, тогда он не работает, для этого снова нужно обновить приложение/код, а только он работает).

Пример: если я выберу имя из имени, будут отображены соответствующие согласованные данные. Опять же, если я uncheck тот же и checksome other checkbox, как от Description, то он не работает. Аналогично для всех вышеперечисленных критериев. Вы можете observe ясно.

Пожалуйста, дайте мне знать, что я сделал неправильно здесь и дайте мне знать, как правильно его фильтровать. Создано Fiddle. Заранее спасибо !

Answer 1

Проблема заключается в извилистой логике фильтрации. В любое время, когда вы обнаруживаете множество заявлений if, подумайте о реорганизации логики ветвления. Разбирая его на более мелкие компоненты, вы можете упростить управление, и если вы можете вообще не использовать if, вам нужно проверить только один путь, а не несколько.

Каждый раз, когда пользователь проверяет флажок, нам нужно убедиться, что мы отобразили только те элементы, которые соответствуют количеству ящиков. Поэтому нам нужно знать: 1) сколько ящиков проверено, n и 2) сколько предметов можно найти с помощью n соответствующих полей.

Мы можем воспользоваться тем фактом, что булевы переменные могут быть отнесены к целым числам (0 = false, true = 1) и использовать их для подсчета количества отмеченных ячеек, а также количества найденных совпадений.

Мы также можем поместить имена полей в массив, чтобы у нас не было много повторений в наших функциях.

Fiddle example here.

var fields = ["name", "description", "field4"]; 

//for each field, count how many fields the item matches 
function getMatches(item, matchesNeeded) { 
    var foundMatches = 0; 
    fields.forEach(field => { 
     foundMatches += item[field] === $scope.pagedItems[field] 
    }); 

    //make sure found at least one match and found desired minimum 
    return foundMatches && foundMatches >= matchesNeeded; 
} 

//count how many boxes are checked 
//this will tell us how many different fields we are matching on 
function numChecked() { 
    var count = 0; 
    fields.forEach(field => { 
     //this will auto convert falsy to 0. 
     //truthy values will be 1 
     count += Boolean($scope.pagedItems[field]); 
    }); 
    return count; 
} 

$scope.filterItems = function(item) { 
    return getMatches(item, numChecked()); 
}; 

Answer 2

Как @Larry указал, что это больше основано на логике. Для этого я изменил книгу «Pro AngularJS» для печати в прессе A.

Базовая логика в функции фильтра, как показано ниже -

$scope.categoryFilterFn = function (product) { 
    var canHave = false;//dont load by default 
    var atLeastOneTrue = false;//Check if previously checked any condition 
    angular.forEach(filterValues, function(selectedValue, key) { 
     var selectVals = Object.values(selectedValue); 
      if(selectVals.indexOf(product[key]) !== -1) {//if values exits in product. 
       canHave = !atLeastOneTrue ? true : canHave; 
      }else{ 
       canHave = false; 
      } 
      atLeastOneTrue = true; 
    }); 
    return canHave; 
} 

Для working Fiddle.