CODEWITHSUNDEEP
filterangularjshtml-select
Kishore Relangi
Kishore Relangi

Reputation: 2034

angular js filter for input multiple select

I have the following dates select drop down.

<input type="text" ng-modle="byNameFilter"/>
<select ng-model="byDateFilter" multiple="multiple">
 <option ng-repeat="date in dates" value="{{date}}">{{date}}</option>
</select>
<div>
<repeater ng:repeat="program in programNames | filter:byNameFilter | filter:byDateFilter">
   <a href="#/client/{{client}}/program/{{program.name}}" class="span2 btn">{{program.name}}</a>
</repeater>

the program structure is:

[{'name':'program1','dates':['date1', 'date2']},{'name':'program2','dates':['date3', 'date2']}]

Now the filter is working when I put some text in ng-model:byNameFilter but It is not working when I select dates from select drop down (It is working fine if I remove multiple attribute).

How we can implement filter for multiple select options in angular.js

Upvotes: 0

Views: 1672

Answers (1)

Kishore Relangi
Kishore Relangi

Reputation: 2034

I solved it using a custom function (provided it to filter)

$scope.dateFilter = function (item)
{
    //debugger;

    if ($scope.byDateFilter === undefined || $scope.byDateFilter.length == 0)
    {
        return true;
    }   

    for (var i in $scope.byDateFilter){         

        for (var j in item.dates)
        {
            if (item.dates[j] == $scope.byDateFilter[i])
            {
                return true;
            }
        }
    }

    return false;
}

Change in html:

<repeater ng:repeat="program in programNames | filter:byNameFilter | filter:dateFilter">

Is there any other simple solution ?

Upvotes: 2

Related Questions