Angular 下拉列表过滤器

Question

我是 angular 的新手，我正在尝试构建基本的搜索 + 过滤功能

我能够进行搜索，但我在过滤独特技能时遇到困难（本例中为 1、2、3）我尝试使用 "ng-click" 并调用自定义函数但没有得到任何解决方案

这是我的代码示例：

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

Answer 1

1) 您的变量 "search" 始终为空，因为您忘记将其设置为 select 列表

的 ng-model

将您的 select 标签替换为

<select ng-model="search">

2) 如下设置自定义号码过滤器

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;
    }
});

并将您的 ng-repeat 更改为

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

工作fiddle

Angular 下拉列表过滤器

Angular filter for dropdown

angularjs

django

python-2.7

user-interface

angularjs-scope