2017-03-23 3 views
0

Ich habe eine Liste von Dashboards (vm.dashboards), aus denen ich die von mir erstellten Dashboards filtern möchte. Standardmäßig wird die gesamte Liste angezeigt, aber wenn ich auf das Kontrollkästchen "Zeige mein Dashboard" klicke, sollte nur die von mir erstellte Liste der Dashboards angezeigt werden.Winkelfilter mit Checkbox implementieren

HTML-Code:

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

Jetzt kommt der schwierige Teil ist, dass es kein direkter Weg ist myDashboards Liste zu bekommen. Wenn (currentUserId === dashboardOwnerId), dann ist das bestimmte Dashboard myDashboard. Also muss ich die Bedingung im Filter anwenden. Ich habe versucht zu tun, diesen Ansatz:..

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

So dashboard.creator [ "@ href"] split ("/") pop() werden Werte geben wie 1, 101, 123 und CurrentUserID werden geben Sie auch ähnliche Werte an. Wenn beide übereinstimmen, bekomme ich das von mir erstellte Dashboard.

Dieser Filter funktioniert genau anders als ich möchte und listet alle Dashboards auf, die nicht von mir erstellt wurden. Kann ich solche Bedingungen Filter geben? Muss ich einen benutzerdefinierten Filter dafür erstellen? Jede Hilfe/Vorschläge würde geschätzt werden. Vielen Dank!

+0

Bitte überprüfen Sie den folgenden Link. [Link] (http://stackoverflow.com/questions/23983322/angularjs-checkbox-filter) –

Antwort

0

Der sauberste Weg war, einen benutzerdefinierten Filter zu erstellen und das Dashboard mit den richtigen Werten zurückzugeben.

.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-Seite:

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

Ich hoffe, das hilft jemand ähnliches Problem konfrontiert. Vielen Dank!