확인란을 사용하여 각도 필터를 구현합니다.

Question

나는 대시 보드 (vm.dashboards) 목록을 가지고 있는데,이 중 대시 보드를 필자가 만든 필터로 필터링하려고합니다. 기본적으로 전체 목록을 표시하지만 "내 대시 보드 표시"확인란을 클릭하면 나에 의해 작성된 대시 보드 목록 만 표시됩니다.

HTML 코드 :

<div> 
      <input type="checkbox" ng-model="showMyDashboard" ng-value="vm.myDashboard" ng-checked="false" ng-true-value="1" ng-false-value="0"><span for="radio" style="margin-left:5px;" class="text-only">Show my dashboards</span> 
     </div> 

<ul ng-repeat="dashboard in vm.dashboards" class="list-group"> 
      <li class="list-group-item"> 
      <div class="row"> 
       <div class="col-sm-5"><a class="list-group-item-heading dashboard-heading">{{ dashboard.title }} </a> 
       <p class="list-group-item-text dashboard-text">{{ dashboard.desc }}</p> 
       </div></li> 
    </ul> 

이제 까다로운 부분은 myDashboards 목록을 얻을 수있는 직접적인 방법이 없다는 것입니다. (currentUserId === dashboardOwnerId)이면 해당 대시 보드는 myDashboard입니다. 그래서 필터에 조건을 적용해야합니다. . 1과 같은 값을 줄 것이다 팝업(), (101), 123 을

ul.list-group(ng-repeat="dashboard in vm.dashboards | filter: dashboard.creator["@href"].split("/").pop() === vm.currentUSerID") 

그래서, dashboard.creator [ "@ href를"] 분할 ("/") 및 currentUSerID 것이다. 나는이 방법을 수행 시도 비슷한 가치관을 제공하십시오. 언제 둘 다 나와 일치하는 대시 보드를 얻을 날.

위의 필터는 내가 원하는 것과 완전히 반대이며, 저에게 생성되지 않은 모든 대시 보드를 나열합니다. 필터에 이러한 조건을 부여 할 수 있습니까? 그것을 위해 맞춤 필터를 만들어야합니까? 어떤 도움이나 제안도 부탁드립니다. 감사!

Answer 1

가장 간단한 방법은 맞춤 필터를 만들고 올바른 값으로 대시 보드를 반환하는 것입니다.

.filter("myDashboardFitler", function() { 
      return function(input, currentUserId, checkedValue) { 
       var owner = []; 
       var i; 

       angular.forEach(input, function(dashboard) { 
        if (checkedValue === "YES") { 
         if (dashboard.creator["@href"].split("/").pop() === currentUserId) { 
          owner.push(dashboard); 
         } 
        } else { 
         owner.push(dashboard); 
        } 
       }); 
       return owner; 
      }; 
     }); 

HTML 페이지 :

<input type="checkbox" ng-model="checkedValue" ng-true-value="'YES'" ng-false-value="'NO'" ng-change="myDashboardFilter()"><span for="radio" style="margin-left:5px;" class="text-only">Show only my dashboards</span> 
<ul ng-repeat="dashboard in vm.dashboards | myDashboardFitler : vm.currentUserId : checkedValue" class="list-group"> 

나는이 유사한 문제에 직면 사람을 도움이되기를 바랍니다. 감사!