사용자 정의 필터가있는 각도 js 다중 확인란.

Question

각도 js 사용자 정의 필터를 작성하는 데 도움이 될 수 있습니다.

나는 여러 확인란을 사용하여 레코드를 필터링하기 위해 레코드 (Json 데이터)에서 두 개의 동적 필터 (브랜드 및 판매자)를 만들었습니다.

이제 확인란을 선택하여 레코드를 필터링해야합니다. 처음에는 모든 체크 박스를 선택 취소하고 모든 레코드를 표시해야합니다.

선택한 필터를 기준으로 레코드를 선택해야합니다. 사전에 http://jsfiddle.net/Hp4W7/106/

감사 :

내 JSON 데이터가

$scope.records = [ 
    { 
    "MerchantName": "Fashion and You", 
    "BrandList": " Nike, Fila", 
    "Description": "Fashion and You Store" 
    }, 
    { 
    "MerchantName": "Fashion and You", 
    "BrandList": " Levis, Fasttrack, Fila", 
    "Description": "Fashion and You Store" 
    }, 
    { 
    "MerchantName": "ebay", 
    "BrandList": "Nokia,HTC,Samsung", 
    "Description": "Ebay Store" 
    }, 
    { 
    "MerchantName": "amazon", 
    "BrandList": "Apple,Dell,Samsung", 
    "Description": "amazon Store" 
}, 
{ 
    "MerchantName": "amazon", 
    "BrandList": " pepe jeans, peter england, red tape", 
    "Description": "amazon Store" 
}]; 

HTML은 여기 fiidle

<div ng-repeat="record in records"> 
    {{record.Description}} 
</div> 

입니다.

Answer 1

여기에 OR 케이스 필터가 있습니다. 판매자 OR 브랜드와 일치하는 항목에 대한 결과를 리턴합니다.

예 : http://jsfiddle.net/TheSharpieOne/ZebC7/

추가 된 것 :

우리는 체크 박스를 체크 저장할 수있는 뭔가가 필요, 그것은 개체, 키가 진실되고 상인 또는 브랜드와 가치있을 것입니다 /는 false 경우 가 선택됩니다. 그런 다음 개체를 통해 무엇이 선택되었는지 확인하고 repeatFilter 메서드에 전달되는 searchFilter 메서드에서 원하는대로 수행합니다. 여기

<label><input type="checkbox" ng-model="merchantCheckboxes[Merchant.Merchantname]" /> {{Merchant.Merchantname}}</label> 

컨트롤의 추가는 "체크 체크 박스가 처음 나타나는 제

$scope.merchantCheckboxes = {}; 
$scope.brandCheckboxes = {}; 
function getChecked(obj){ 
    var checked = []; 
    for(var key in obj) if(obj[key]) checked.push(key); 
    return checked; 
} 
$scope.searchFilter = function(row){ 
    var mercChecked = getChecked($scope.merchantCheckboxes); 
    var brandChecked = getChecked($scope.brandCheckboxes); 
    if(mercChecked.length == 0 && brandChecked.length == 0) 
     return true; 
    else{ 
     if($scope.merchantCheckboxes[row.MerchantName]) 
      return true; 
     else{ 
      return row.BrandList.split(/,\s*/).some(function(brand){ 
       return $scope.brandCheckboxes[brand]; 
      }); 
     } 
    } 
}; 

UPDATE

및 검색 필터로 변경"AND "

예 : http://jsfiddle.net/TheSharpieOne/ZebC7/1/

,

기능이 처음 확인 된 사람을 주문 또한

$scope.orderChecked = function(item){ 
    if(item.Merchantname && $scope.merchantCheckboxes[item.Merchantname]) 
     return 0; 
    else if(item.brandname && item.brandname.split(/,\s*/).some(function(brand){ 
       return $scope.brandCheckboxes[brand]; 
      })) 
     return 0; 
    else 
     return 1; 
}; 

(모두를위한 하나 개의 함수를 만든), 일부 정리가 필요한 검색 필터에 "AND"

$scope.searchFilter = function(row){ 
    var mercChecked = getChecked($scope.merchantCheckboxes); 
    var brandChecked = getChecked($scope.brandCheckboxes); 
    if(mercChecked.length == 0 && brandChecked.length == 0) 
     return true; 
    else{ 
     if(($scope.merchantCheckboxes[row.MerchantName] && brandChecked.length==0) 
      || (mercChecked.length == 0 && row.BrandList.split(/,\s*/).some(function(brand){ 
       return $scope.brandCheckboxes[brand]; 
      })) 
      || ($scope.merchantCheckboxes[row.MerchantName] && row.BrandList.split(/,\s*/).some(function(brand){ 
       return $scope.brandCheckboxes[brand]; 
      }))) 
      return true; 
     else{ 
      return false; 
     } 
    } 
}; 

을 변경할 수 있지만, 당신은 할 수 그것이 모두 어떻게 행해지는지보십시오.