angularjs中的动态复选框过滤答案

【问题标题】：dynamic checkbox filtering in angularjsangularjs中的动态复选框过滤
【发布时间】：2017-04-03 10:15:08
【问题描述】：

嗨，我是 angularjs 的新手，想像这种格式一样过滤

我有三个 json 值 1.phone 制造商名称和 2.phone ram 和 3.phone price

应根据制造商加载 ram 和价格，并根据价格、ram 和制造商名称过滤产品列表

我知道基本过滤，但不能在三个复选框中选择

my demo plunker

【问题讨论】：

请在问题内容中包含所有相关的代码和数据示例。问题应该是自包含的，我们不应该仅仅为了查看您的问题而离开现场。演示很棒，但只能用于支持问题本身实际存在的内容
还有……你有什么问题和具体问题？
尝试使用自定义过滤器：stackoverflow.com/a/21171880/2419919
@priya 你可以改变 json 结构吗？
@aravind 是的，你可以

标签： javascript angularjs

【解决方案1】：

没有简单的方法可以在 Angular 复选框上创建过滤器。我要做的是，对于产品的每个外键，将每个复选框的 ng-model 链接到对象的键。然后编写一个使用这些对象进行过滤的函数。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope , $http) {
      
    // mobile price details
    $http.get('https://api.myjson.com/bins/3el1e').then(function(res) {
        $scope.priceList = res.data;
           
    });
    
    // mobile ram details
    
    $http.get('https://api.myjson.com/bins/qcj6').then(function(res) {
        $scope.ramList = res.data;
    });
    
    // mobile manufacture details
    $http.get('https://api.myjson.com/bins/52t8y').then(function(res) {
        $scope.manuNameList = res.data;
    });
    
    var allProductDetails = [];
    // product details
    $http.get('https://api.myjson.com/bins/42diq').then(function(res) {
        allProductDetails = res.data;
    });

    // set the filter selection objects on the scope
    // they will look like this: 
    // { name_1: false, name_2: false, name_3: false }
    $scope.selectionManuName = {}
    $scope.selectionRam = {}
    $scope.selectionPrice = {}
    
    $scope.filter = function() {
        var filteredProductDetails = allProductDetails
        filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_manufacture_name', $scope.selectionManuName)
        filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_ram', $scope.selectionRam)
        filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_price', $scope.selectionPrice)
        return filteredProductDetails
    }
    
    function selectionFilter(products, propName, selection) {
        var filteredProducts = []
        // prevent undefined errors
        if(products) {
            //loop through the product
            for(var i = 0; i < products.length; ++i) {
                var product = products[i];
                
                // an array of foreign keys, e.g. ram
                var productPropIdArray = product[propName]
                // check whether at least one of the values to filter on corresponds to one of the foreign keys
                // algorithm: 
                //  - start pretending no value is found
                //  - loop
                //  - if an id is selected and found in the product's foreign key array, 
                //      add it to the filteredProducts array and stop the loop
                var keep = false
                singleProductCheck:
                // loop through the values to filter on
                for (var selectionId in selection) {
                    // check whether the corresponding checkbox is selected
                    if (selection[selectionId]) {
                        
                        // loop through the array of foreign keys
                        for (var j = 0; j < productPropIdArray.length; ++j) {
                            productPropId = productPropIdArray[j]
                            
                            if(productPropId === selectionId) {
                                keep = true
                                break singleProductCheck;
                            }
                        }
                    }
                }
                
                if (keep) {
                    filteredProducts.push(product)
                }
            }
        }
        return filteredProducts
    }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">


  ---------------------
  <div class="form-check" ng-repeat="set_manu_name in manuNameList">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input" ng-model="selectionManuName[set_manu_name.id]"/>{{set_manu_name.mobile_manu_name}}
    </label>
  </div>
  ---------------------
  <div class="form-check" ng-repeat="set_ram in ramList">
    <label class="form-check-label">
       <input type="checkbox" class="form-check-input" ng-model="selectionRam[set_ram.id]"/>{{set_ram.ram}}
    </label>
  </div>
  <br/>
    ---------------------
  <div class="form-check" ng-repeat="set_price in priceList">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input" ng-model="selectionPrice[set_price.id]" />{{set_price.mobile_price}}
    </label>
  </div>
  ---------------------
  <div ng-repeat="productDetails in filter()">
    <p>{{productDetails.product_list_name}}</p>
    <p>{{productDetails.product_list_price}}</p>
    <p>{{productDetails.product_list_ram}}</p>
    <p>{{productDetails.product_list_manufacture_name}}</p>
    /*/*/*/*/*/*/*/*/*/*/*/*/*/
  </div>
  
     </body>

</html>

【讨论】：