Search code examples
angularjsdjangopython-2.7user-interfaceangularjs-scope

Angular filter for dropdown

I am new to angular and i am trying to build basic search + filter functionality

I am able to get search working but i am having difficulty with filter on unique skills (1,2,3 in this example) I tried using "ng-click" and calling custom function but didn't get any solution

here is my code example :

    <html lang="en">
    <meta charset="UTF-8">
    <title> Exercise</title>
    <!--Angular JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller('person', ['$scope',  function($scope ){
            $scope.players = [{"name" : 'commonABC', 'skill' : 1},{"name" : 'commonXYZ', 'skill' : 3},{"name": 'SAMEqwe', 'skill': 1},{"name": 'SAMEjkl', 'skill': 2}]
            $scope.search = function(row) {
                return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.player_filter) || '') !== -1);
            };
        }]);
    </script>
    </head>
    <body>
        <div ng-app="app">
            <div ng-controller="person">
                <input type="text" ng-model="player_filter" placeholder="search name">
                <select>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                </select>
                <br><br>
                <div ng-repeat="player in players | filter: search">
                    <strong>name is :{{player.name}}</strong
                    <br>
                    <strong>and    skill is :{{player.skill}}</strong>
                    <hr>
                </div>
            </div>
        </div>
    </body>
</html>

Solution

  • 1) Your variable "search" is always empty because you forgot to set it as ng-model to your select list

    Replace your select tag with

    <select ng-model="search">

    2) Set a custom number filter as below

    myApp.filter('numFilter', function() {
    return function(input, number) {
        if(!number) return input;
        var tmp = [];
        for (var i = 0; i < input.length; i++) {
            if (input[i].skill == number) tmp.push(input[i]);
        }
        return tmp;
    }
});

    And change your ng-repeat to

    <div ng-repeat="player in players | numFilter:search  | filter:player_filter">

    Working fiddle