Filter data on click function in AngularJS

Question

I have data on some bikes in my HTML page. I have to filter that data via an on click function. I have used a filter in the text box area, but I want the same functionality via an on click function.

So how can I bind the filter with the click function?

http://jsfiddle.net/3G7Kd/114/

<div ng-app='app' class="filters_ct">
    <ul class="nav" ng-controller="selectFilter">
        <li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}">
            <span class="filters_ct_status"></span>
            {{filter.name}}

            <ul class="subul" ng-if=filter.lists.length>
                <li ng-repeat="list in filter.lists" ng-click=" $event.stopPropagation()">
                  <input type="checkbox">  {{list}}
                </li>
            </ul>
        </li>
    </ul>
    <input type="text" ng-model="search">
    <div ng-controller="listctrl">
        <div class="list" ng-repeat="list in lists | filter:{brand:search}">
            {{list.brand}}
            {{list.year}}
        </div>

        </div>

</div>

Angular

var app = angular.module('app', []); 

app.controller('selectFilter', function($scope) {

    $scope.filters = [
            {
                "name": "brand",
                'lists': ['yamaha','ducati','KTM','honda']
            },
            {
                'name': "year",
                'lists': [2012,2014,2015]
            }
        ];
    $scope.selected = 0;

    $scope.select= function(index) {
       if ($scope.selected === index) 
           $scope.selected = null
       else
           $scope.selected = index; 
    };
});


app.controller('listctrl', function($scope) {

    $scope.lists = [
            {
                "brand": "ducati",
                'year': 2012
            },
            {
                'brand': "honda",
                'year': 2014
            },
            {
                'brand': "yamaha",
                'year': 2015
            },
            {
                'brand': "KTM",
                'year': 2012
            }
        ];

});

user2752661 · Accepted Answer · 2015-08-30 19:02:23Z

3

You already knew how to use the filter when given an object within the partial. I moved one of your controllers so that you have an outer and an inner controller.

<div ng-app='app'ng-controller="MainCtrl as mainCtrl">

    <div ng-controller="listCtrl">

        <!-- your filter object is now accessible here -->
    </div>

</div>

I added a scope variable to the outer controller $scope.activeFilters (filling this you should be able to do on your own, see the plunker for one possible solution.

This object is now changed when clicking on the checkboxes. As $scope.activeFilters is now accessible from the inner controller we can pass it to the filter as before:

<div class="list" ng-repeat="list in lists | filter:activeFilters">
     {{list.brand}}
     {{list.year}}
</div>

Note that there are probably nicer solutions (using the checkbox with a model among other things).

Working plunker: http://jsfiddle.net/ywfrbgoq/

answered Aug 30, 2015 at 19:02

user2752661

Sign up to request clarification or add additional context in comments.

1 Comment

Jitender Over a year ago

Thanks for solution. Its works fine. But I just wanted to know is there any method to do this without assigning ng-click on each 'li'. Can we pass click function from controller itselft

Collectives™ on Stack Overflow

Filter data on click function in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related