動態複選框中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

回答

相關問題