Javascript 通过文本搜索和下拉列表进行角度筛选

我遇到了麻烦，似乎找不到答案。我正在尝试使用文本输入框和下拉菜单进行过滤。这是一个幻想足球应用程序给你一个想法。下面是一些代码

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

全部的
QB
铷
西铁
TE
DEF
K
{{nameSearch.position}

排名：{{list.Rank}Pos:{{{list.Position}}{{list.Team}

{{list.Last}，{{list.First}再见：{{list.Bye}

---

我对如何使搜索在两种输入情况下都能正常工作几乎一无所知。下拉列表应仅搜索位置值。输入框真的可以搜索任何东西。

您应该使用ng repeat的filter选项，这里有一个供您检查的选项，我希望这对您有所帮助。

将

的
ng model
更改为
nameSearch.Position
（大写p），以便它与playerlist的位置字段名称匹配

   <select class="form-control" ng-model="nameSearch.Position">

如果您有与对象属性同名的搜索输入（例如：
nameSearch.Position
与
playerlist.Position
），则仅通过过滤器对象（nameSearch）过滤而不使用过滤器属性（Position）将搜索映射具有相同名称的各个属性

更新：以上内容将帮助您修复职位下拉搜索。

对于名称，请使用如下自定义筛选器。

请注意，
searchname
作为过滤器添加到
ng repeat
中，并将搜索输入的
ng model
保留为非对象。对于以下控制器，您必须将其保留为


控制器：

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

希望这有帮助
 在这里您可以找到用于下拉和搜索的自定义过滤器

我希望这将有助于新的方式

这是我的破绽

HTML：使用
ng repeat
并通过文本输入对其进行过滤。另外，使用
ng选项

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

您可以编写一个自定义筛选器，并将此代码缩短得更快。
自定义筛选器在您的情况下可能会更有用。这就是我解决这个问题的方法

过滤器：

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

在视图中，按如下方式使用：

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


全部的
QB
铷
西铁
TE
DEF
K
{{nameSearch.position}


排名：{{list.Rank}}Pos:{{list.Position}{{list.Team}

{{list.Last}，{{list.First}再见：{{list.Bye}


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


截图：


它向标记添加一个
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版本。此指令可用于使用任何表单文本输入快速创建优雅的TypeAhead

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

sourceArray中值的标签
选择作为sourceArray中值的标签
sourceArray表达式可以使用一个特殊的$viewValue变量>，该变量对应于输入中输入的值

此指令与承诺一起工作，这意味着您可以使用>$http服务以最小的工作量检索匹配项

你也可以分享这个或更好的东西的JS代码是小提琴。当然这一切都在github上抱歉，还没有那么熟悉小提琴。感谢巨大的改进。还是有一辆小车。只允许我搜索或。理想情况下，我希望将下拉列表设置为一个值，然后搜索该值。下拉列表有model、filter，它所做的是观察其属性的更改，因此每次model change filter将做出反应时，请尝试直接在控制器中更改它，以给您一个主意，如何使用自定义过滤器。这正是我试图做的。谢谢现在只需要弄清楚这一切是如何运作的。@jminterwebs，很高兴我的回答对您有所帮助。所以，这个过滤器非常简单：有两个参数（原始数组“input”和过滤条件“filterObject”）作为输入参数。然后在筛选函数中，根据筛选条件和业务逻辑从原始数组中选择一些项。然后将所选项目作为数组返回。
$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>

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