Question

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

我能够进行搜索工作，但我对过滤独特技能有困难（本例中为1,2,3）我尝试使用＆＃34; ng-click＆＃34;并调用自定义函数但没有得到任何解决方案

这是我的代码示例：

＆＃13;

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

＆＃13;

Answer 1

1）你的变量＆＃34;搜索＆＃34;永远是空的，因为您忘记将其设置为选择列表中的ng-model

用

替换您的选择标记

<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

下拉列表的角度过滤器

1 个答案: