확인란을 사용하여 결과를 각도로 필터링하는 방법은 무엇입니까?

Question

확인란을 사용하여 필터를 적용하려고합니다.

확인란이 제대로 표시됩니다 :

<div data-ng-repeat="cust in customers"> 
    <input type="checkbox" data-ng-model="search.city" data-ng-true-value="{{ cust.city }}" data-ng-false-value=""/> {{ cust.city }} 
</div> 

있지만 확인란을 선택하면 아무 일도 발생하지 않습니다 :

<table> 

    <!-- table heading goes here --> 

    <tbody> 
     <tr data-ng-repeat="customer in customers | filter : search"> 
      <td > 
       {{ customer.firstName }} 
      </td> 
      <td > 
       {{ customer.lastName }} 
      </td> 
      <td > 
       {{ customer.address }} 
      </td> 
      <td > 
       {{ customer.city }} 
      </td> 
     </tr> 
    </tbody> 
</table> 

표는 모든 고객을 보여줍니다.

내가 달성하고자하는 것 : 하나 이상의 체크 박스가 선택되었을 때, 테이블은 체크 된 체크 박스의 조건과 일치하는 이들 행만 표시해야합니다.

이 기능을 사용하려면 어떻게해야합니까?

Answer 1

고객 목록을 제공하는 것처럼 보입니다. 하나 이상의 고객이 선택되면 해당 고객과 같은 도시에있는 고객 표가 표시됩니다.

이

// Define our filter 
app.filter('selectedCustomerCities', function($filter) { 
    return function(customers) { 
    var i, len; 

    // get customers that have been checked 
    var checkedCustomers = $filter('filter')(customers, {checked: true}); 

    // Add in a check to see if any customers were selected. If none, return 
    // them all without filters 
    if(checkedCustomers.length == 0) { 
     return customers; 
    } 

    // get all the unique cities that come from these checked customers 
    var cities = {}; 
    for(i = 0, len = checkedCustomers.length; i < len; ++i) { 
     // if this checked customers cities isn't already in the cities object 
     // add it 
     if(!cities.hasOwnProperty(checkedCustomers[i].city)) { 
     cities[checkedCustomers[i].city] = true; 
     } 
    } 

    // Now that we have the cities that come from the checked customers, we can 
    //get all customers from those cities and return them 
    var ret = []; 
    for(i = 0, len = customers.length; i < len; ++i) { 
     // If this customer's city exists in the cities object, add it to the 
     // return array 
     if(cities[customers[i].city]) { 
     ret.push(customers[i]); 
     } 
    } 

    // we have our result! 
    return ret; 
    }; 
}); 

당신의 마크 업이 다음과 같이 무언가로 변경됩니다 :

<div data-ng-repeat="customer in customers"> 
    <!-- record that this customer has been selected --> 
    <input type="checkbox" ng-checked="customer.checked" ng-model="customer.checked" /> {{ customer.city }} 
</div> 

<table> 
    <!-- table heading goes here --> 
    <tbody> 
     <!-- use our custom filter to only display customers from the cities selected --> 
     <tr data-ng-repeat="customer in customers | selectedCustomerCities"> 
      <td>{{ customer.firstName }}</td> 
      <td>{{ customer.lastName }}</td> 
      <td>{{ customer.address }}</td> 
      <td>{{ customer.city }}</td> 
     </tr> 
    </tbody> 
</table> 

당신은 그것을이 Plunker에서 근무 볼 수 있습니다 http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview

를

하면이 작업을 수행하려면 사용자 정의 필터가 필요합니다

Answer 2

AngularJS 필터에 함수를 전달할 수 있습니다. 예를 들면 :

설정 당신과 같이 입력 태그 :

<input type="checkbox" ng-model="search[cust.city]" /> {{ cust.city }} 

이 필터를 설정 같은 : 컨트롤러에서

<tr data-ng-repeat="customer in customers | filter:searchBy() "> 

:

function ctrl($scope) { 
    $scope.customers = [...]; 

    $scope.search = {};  
    $scope.searchBy = function() { 
    return function (customer) { 
     if ($scope.search[customer.city] === true) { 
     return true; 
     } 
    } 
    }; 
} 

모든 고객을 표시하고자하는 경우 시작시 간단히 $scope.search을 city으로 초기화하면 customers 어레이.

Here is a sample Plunker.