Question

我遇到了麻烦，似乎无法找到答案。我尝试使用文本输入框和下拉菜单进行过滤。它为幻想足球应用程序提供了一个想法。

下面的一些代码

 <form class="form-inline search-width">
<input class="search form-control" type="text" ng-model="nameSearch.name">
<select class="form-control" ng-model="nameSearch.position">
    <option value="All">All</option>
    <option value="QB">QB</option>
    <option value="RB">RB</option>
    <option value="WR">WR</option>
    <option value="TE">TE</option>
    <option value="DEF">DEF</option>
    <option value="K">K</option>
</select>
    {{nameSearch.position}}
</form>
<ul class="list">

    <li ng-repeat="list in playerlist" 
        ng-click="PlayerSelected($event, this)">Rank: {{list.Rank}} Pos: {{list.Position}} {{list.Team}}</br>
        {{list.Last}}, {{list.First}} Bye: {{list.Bye}}</li>

</ul>

我对如何使用两个输入进行搜索工作最为敏锐。下拉列表应仅搜索位置值。输入框可以真正搜索任何内容。

Answer 1

您应该使用ng-repeat中的过滤器选项，这里有example供您检查，我希望这对您有帮助。

Answer 2

将<select>的{{1}}更改为ng-model（大写P），使其与播放列表的位置字段名称匹配

nameSearch.Position

然后将ng-repeat第二个过滤器更改为<select class="form-control" ng-model="nameSearch.Position">而不是nameSearch。

nameSearch.position

如果您的搜索输入与对象的属性具有相同的名称（例如：ng-repeat="list in playerlist | filter:searchname | filter: nameSearch"与nameSearch.Position相同），则仅使用过滤器对象（nameSearch）进行过滤，而不使用过滤器属性（位置）搜索映射具有相同名称的相应属性。

更新：以上内容可帮助您修复“排名”下拉列表搜索对于名称，请使用如下自定义过滤器请注意，playerlist.Position中的searchname被添加为ng-repeat中的过滤器，并使您的搜索输入ng-model成为非对象。对于以下控制器，您必须将其保持为
<input class="search form-control" type="text" ng-model="nameSearch">

控制器：

$scope.searchname = function (row) {
        return (angular.lowercase(row.First).indexOf($scope.nameSearch || '') !== -1 || angular.lowercase(row.Last).indexOf($scope.nameSearch || '') !== -1);
    };

希望这有帮助。

Answer 3

在这里，您可以找到用于下拉列表和搜索的自定义过滤器

我希望Code能以新的方式提供帮助！

Answer 4

这是我对 http://jsfiddle.net/0ey84dwu/

的抨击

HTML：使用ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 120px; font-weight: bold; color: #FFFFFF; background-color: #98bf21; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #7A991A; }并按文字输入过滤。另外，请使用ng-repeat

ng-options

然后是JS：拥有一系列所有球员。根据您选择的下拉列表，将这些播放器添加到仅包含所选位置的玩家的新阵列中。选择<div ng-app="TestApp"> <div ng-controller="TestController"> <input class="search form-control" type="text" ng-model="nameSearch.name"> <select class="form-control" ng-options="position as position for position in positions" ng-model="nameSearch.position" ng-change="setPosition()"> </select> <div ng-repeat="player in players | filter: nameSearch.name"> {{player.First}} {{player.Last}} </div> </div> </div>将设置All，从而根据您搜索的内容过滤所有玩家。

$scope.players = $scope.allPlayers

您可以编写自定义过滤器并进一步缩短此代码

Answer 5

自定义过滤器在您的情况下非常有用。我将如何解决这个问题。

过滤器：

angular.module('DraftBoard').filter('playersFilter', function () {
    return function (input, filterObject) {
        if (filterObject == undefined) { return input; }

        var searchName = filterObject.name.toLowerCase();
        var searchPosition = filterObject.position.toLowerCase();
        var out = [];
        if (input != undefined) {
            for (var i = 0; i < input.length; i++) {

                var firstName = input[i].First != undefined ? input[i].First.toString().toLowerCase() : '';
                var lastName = input[i].Last != undefined ? input[i].Last.toString().toLowerCase() : '';
                var team = input[i].Team != undefined ? input[i].Team.toString().toLowerCase() : '';
                var position = input[i].Position != undefined ? input[i].Position.toString().toLowerCase() : '';

                var filterCondition = ((searchPosition === 'all') || (position.indexOf(searchPosition) > -1))
                    && ((searchName == '') || (firstName.indexOf(searchName) > -1) || (lastName.indexOf(searchName) > -1) || (team.indexOf(searchName) > -1));

                if (filterCondition) {
                    out.push(input[i]);
                }
            }
        }
        return out;
    };
});

在你的控制器中添加：

$scope.nameSearch = {
        name: '',
        position: 'All'
    };

在视图中以这种方式使用它：

<div class="selectionlist">
    <form class="form-inline search-width">
    <input class="search form-control" type="text" ng-model="nameSearch.name">
    <select class="form-control" ng-model="nameSearch.position">
        <option value="All">All</option>
        <option value="QB">QB</option>
        <option value="RB">RB</option>
        <option value="WR">WR</option>
        <option value="TE">TE</option>
        <option value="DEF">DEF</option>
        <option value="K">K</option>
    </select>
        {{nameSearch.position}}
    </form>
    <ul class="list">

        <li ng-repeat="list in playerlist | playersFilter:nameSearch "
            ng-click="PlayerSelected($event, this)">
            Rank: {{list.Rank}} Pos: {{list.Position}} {{list.Team}}</br>
            {{list.Last}}, {{list.First}} Bye: {{list.Bye}}
        </li>

    </ul>

</div>

Answer 6

ui.bootstrap.typeahead插件可能就是您所需要的：

http://angular-ui.github.io/bootstrap/

截图： https://i.stack.imgur.com/VJenP.png {
{0}}

它向＆lt; input＆gt;添加uib-typeahead属性标签。

用法示例：

<input type="text" ng-model="customPopupSelected" 
    placeholder="Custom popup template" 
    uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" 
    typeahead-popup-template-url="customPopupTemplate.html" 
    class="form-control">

其文档中的引言：

Typeahead是Bootstrap v2的Typeahead插件的AngularJS版本。该指令可用于快速创建具有任何表单文本输入的优雅类型。

它非常好地集成到AngularJS中，因为它使用了select指令语法的一个子集，它非常灵活。支持的表达式是：

sourceArray中值的标签   在sourceArray中选择值作为标签   sourceArray表达式可以使用特殊的$ viewValue变量，该变量＆gt;对应于输入中输入的值。

此指令适用于promises，这意味着您可以轻松地使用＆gt; $ http服务检索匹配。

通过文本搜索和下拉列表进行角度过滤

6 个答案: