CODEWITHSUNDEEP
javascriptangularjsfilter
Halufolia
Halufolia

Reputation: 61

AngularJS logical expression in filter?

Basically I want to filter to more than one value in a list. I have a list of filters called items which represent a value for the listitems in the list below. If the user click on the link One it will list only the listitems that has 1 as a value, clicking on Two list the listitems with a value of 2 etc..

The main problem comes from a link called OneTwo which should list the listitems which has value of 1 or 2, but I simply cannot make it work. I tried to use dot to include more than one value, but I just cannot make it work. In the example I set the value of OneTwo to '0', but it should be something like ('1'.'2'). Codes and JSFiddle example below:

HTML:

<div ng-controller="FilterListController">
    <ul>
        <li ng-repeat="item in items">
            <a ng-click="select(item)" ng-class="{active: item == selected}">{{item.name}}</a>
        </li>
    </ul>
    <ul>
        <li ng-repeat="listitem in list | filter:{value: selected.value}">
            {{listitem.name}} - {{listitem.value}}
        </li>
    </ul>
</div>

JS:

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

function FilterListController($scope) {
    $scope.list = [
        {name: 'a', value: '1'},
        {name: 'b', value: '2'},
        {name: 'c', value: '3'}];

    $scope.items = [{name: 'OneTwo', value: '0'},{name: 'One', value: '1'},{name: 'Two', value: '2'},{name: 'Three', value: '3'}];

    $scope.selected = $scope.items[0];
    $scope.select = function(item){
        $scope.selected = item;
    }
}

JSFiddle example.

Upvotes: 0

Views: 1410

Answers (1)

Pat-rice
Pat-rice

Reputation: 432

You should use a custom filter from the controller and then display your list,

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

function FilterListController($scope, $filter) {
    $scope.list = [
        {name: 'a', value: '1'},
        {name: 'b', value: '2'},
        {name: 'c', value: '3'}];

    $scope.items = [{name: 'OneTwo', value: '12'},{name: 'One', value: '1'},{name: 'Two', value: '2'},{name: 'Three', value: '3'}];

    $scope.selected = $scope.items[0];
    $scope.select = function(item){
        $scope.selected = item;

        $scope.resultList = $filter('filterMyList')($scope.list, item);

    }
}

myApp.filter('filterMyList', function() {
    return function(list, val) {
        var newList = [];
        for (var i in list) {
            if(val.value.indexOf(list[i].value) !== -1) {
                newList.push(list[i]);
            }
        }

        return newList;

    }
})

Updated JSFiddle : http://jsfiddle.net/bikiew/c7jQk/1/

Upvotes: 1

Related Questions