2016-09-27 2 views
2

angularJS에서 만든 테이블이 있습니다.각도 테이블 필터링 관련 문제 td

HTML : 나는 필터를 적용 할 <td data-title="'Current State'">에서

<div class="widget-content" ng-controller="getAllBenchersController"> 
    <table ng-table="talentPoolList" show-filter="true" 
      class="table table-striped table-bordered"> 
     <tr ng-repeat="employee in $data" | filter: testFilter"> 
      <td data-title="'#'">{{$index + 1}}</td> 
      <td data-title="'Employee ID'" sortable="'employee.employeeNo'" 
        filter="{ 'employee.employeeNo': 'text' }"> 
       {{employee.employee.employeeNo}} 
      </td> 
      <td data-title="'Current State'" sortable="'state.state'" filter="{ 'state.state': 'text' }" 
        ng-class="{ red: employee.state.state == 'Available', blue: employee.state.state == 'Blocked'}"> 
       {{employee.state.state}}    
      </td> 
     </tr> 
    </table> 
</div> 

. 'Available'및 'Blocked'값을 반환하는 상태 만 표시하려고합니다.

내 컨트롤러는 다음과 같습니다

myApp.controller('getAllBenchersController', ['$scope', 'employeeTalentPoolServices', 'dataTable', '$window', '$timeout', function ($scope, employeeTalentPoolServices, dataTable, $window, $timeout) { 
    employeeTalentPoolServices.getAllBenchers().then(function (result) { 
     $scope.data = result.data; 
$scope.testFilter = function (item) { 
      return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked'); 
     } 
}); 

상태는 일반적으로 -'Available ','차단 ','청구 '와'거부 '값을 반환합니다. 테이블에 상태 만 표시되도록하려면 '사용 가능'및 '차단됨'으로 설정하십시오. 수표를 가지고 내가 잘못하고있는 것을 지적하십시오.

답변

2

상태가 '사용 가능'이고 '차단됨'인 항목 만 표시하려면 ng-repeat에 각도 필터를 적용하는 것이 가장 좋습니다. 이 방법으로 ng-repeat는 테이블에 필요한 항목 만 계산합니다.

당신은 예를 들어, 새 필터를 추가 할 수 있습니다 : 당신의 div 요소가 있어야한다

myApp.filter('filterState', 
    [], function() { 
     return function(items) { 
     return items.map(function(obj) { 
      if (obj.state === 'available' || obj.state === 'blocked') 
      return obj; 
     }); 
}); 

, 후 : 코드 위

<tr ng-repeat="employee in $data" | filter: filterState"> 
+1

고마워요. 그것은 효과가있다! – Phoenix

2
return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked'); 

부울 값을 반환합니다, 당신은 또한 경우 배열 목록에 값이 있으면 여기에 하나의 값만 고려됩니다. for 루프를 작성한 다음 값을 확인해야합니다. 아래 코드를 참조하십시오 :

var filteredOutput=[]; 
for(var i=0;i<item.length; i++){ 
if(item[i].state.state.toLowerCase() === 'available' || item[i].state.state.toLowerCase() === 'blocked') 
    { 
    filteredOutput.push(item[i]); 
    } 
} 
return filteredOutput;