动态复选框中angularjs

您好我“新来angularjs过滤想过滤器这样的格式动态复选框中angularjs

我有三个的JSON值1.phone制造商名称和2.phone RAM和3手机的价格

根据制造商的RAM和价格应该被加载并按照价格和RAM和制造商名称的产品列表中应的过滤

我知道基本的过滤，但在三个复选框可以“牛逼能

my demo plunker

来源

2016-11-19 priya

请在提问内容的所有相关代码和数据样本。问题应该是自我包含的，我们不应该为了回顾您的问题而离开现场。演示很棒，但只能用于支持问题本身实际存在的内容 – charlietfl

另外...您有什么问题和具体问题？ – charlietfl

尝试使用自定义过滤器：http://stackoverflow.com/a/21171880/2419919 – sreeramu

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

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="[email protected]" 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>

来源

2016-11-20 12:40:42 raichu

动态复选框中angularjs

回答

相关问题