2017-03-23 9 views
0

私が作成したダッシュボードをフィルタリングするダッシュボード(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は以下となります。私は、このアプローチをやってみました同様の値を与える。両方が一致すると、私はダッシュボードを私が作成します。

このフィルタは、私が望むものとまったく反対で、私が作成していないすべてのダッシュボードをリストしています。 フィルターにそのような条件を付けることはできますか?私はそれのためのカスタムフィルタを構築する必要がありますか?どんな助力/提案も感謝します。ありがとう!

+0

以下のリンクをご確認ください。 [リンク](http://stackoverflow.com/questions/23983322/angularjs-checkbox-filter) –

答えて

0

カスタムフィルタを作成し、正しい値でダッシュボードを返すのが一番きれいです。

.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"> 

私は、これは同様の問題に直面して誰かに役立ちます願っています。ありがとう!