Search code examples
angularjslistcheckboxangular-filters

implement angular filter using checkbox

I have a list of dashboards(vm.dashboards) out of which I want to filter the dashboards created by me. By default it displays the entire list but when i click on the "show my dashboard" checkbox , it should display only the list of dashbaords created by me.

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>

Now the tricky part is that there is no direct way to get myDashboards list. If(currentUserId === dashboardOwnerId) then that particular dashboard is myDashboard. So I have to apply the condition in the filter. I tried doing this approach:

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

So, dashboard.creator["@href"].split("/").pop() will give values like 1, 101, 123. and currentUSerID will give similar values too. When both matches thats when i get the dashboard created by me.

This filter above does totally opposite to what i want and lists all dashboards that are not created by me. Can i give such condition to filters ? do I need to build custom filter for it? Any help/suggestions would be appreciated. Thanks!

Solution

  • The cleanest way to do was to create a custom filter and return the dashboard with correct values.

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

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

    I hope this helps someone facing similar issue. Thanks!