通過文本搜索和下拉角度過濾器

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

自定義過濾器可以在您的情況非常有用。那我該如何解決這個問題。

過濾器：

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 2

你應該使用ng-repeat的過濾選項，這裏有一個example供你檢查，我希望這對你有所幫助。

Answer 3

更改<select>的ng-model到nameSearch.Position（大寫P），這樣它匹配playerlist

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

的位置字段名稱，然後你的NG-重複第二過濾器更改爲nameSearch，而不是nameSearch.position。

ng-repeat="list in playerlist | filter:searchname | filter: nameSearch" 

如果你有相同的名稱，對象的屬性（例如：nameSearch.Position一樣playerlist.Position）搜索輸入，過濾只是通過過濾器對象（nameSearch）未經篩選器屬性（位置）將搜索映射各自的具有相同名稱的屬性。

更新：以上將幫助您獲得固定的位置下拉搜索。
對於名稱，請使用下面的自定義過濾器。
請注意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 4

這裏u能找到自定義過濾器的下拉菜單和搜索

我希望這將Code與一些新的方式幫助！

Answer 5

這裏是我的裂紋在此http://jsfiddle.net/0ey84dwu/

HTML：使用ng-repeat和文本輸入過濾。此外，使用ng-options

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

然後JS：有一個所有的球員陣列。根據您對下拉列表的選擇，將這些玩家添加到僅包含所選位置玩家的新陣列中。選擇All將設置$scope.players = $scope.allPlayers，從而通過您搜索的任何內容過濾所有玩家。

var app = angular.module('TestApp',[]); 

app.controller('TestController', function($scope) 
{ 
    $scope.nameSearch = {}; 
    $scope.nameSearch.position = 'All'; 
    $scope.positions = ['All','QB','RB','WR','TE','DEF','K']; 
    $scope.players = $scope.allPlayers; 

    $scope.setPosition = function() 
    { 
    $scope.players = []; 
    if ($scope.nameSearch.position != 'All') 
    { 
     for (var i in $scope.allPlayers) if ($scope.allPlayers[i].Position == $scope.nameSearch.position) $scope.players.push($scope.allPlayers[i]); 
     return; 
    } 
    $scope.players = $scope.allPlayers; 
    }; 

    $scope.allPlayers = [ 
    { 
    "Rank":1, 
    "First":"Le'Veon", 
    "Last":"Bell", 
    "Position":"RB", 
    "Team":"PIT", 
    "Bye Week":11 
    }, 
    { 
    "Rank":2, 
    "First":"Jamaal", 
    "Last":"Charles", 
    "Position":"RB", 
    "Team":"KC", 
    "Bye Week":9 
    }, 
    { 
    "Rank":3, 
    "First":"Adrian", 
    "Last":"Peterson", 
    "Position":"RB", 
    "Team":"MIN", 
    "Bye Week":5 
    }... 
    ... 
    .. 
    ...]; 

    $scope.setPosition(); 

}); 

你可以寫一個自定義過濾器，縮短這段代碼更

Answer 6

ui.bootstrap.typeahead插件可能成爲你所需要的：

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

截圖： https://i.stack.imgur.com/VJenP.png

它增加了一個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"> 

從它的文檔行情：

的預輸入，引導V2的預輸入插件的AngularJS版本。這個指令可以用來快速創建任何形式的文本輸入優雅的typeahead。

它非常好地集成到AngularJS中，因爲它使用了select指令語法的一個子集，非常靈活。支持的表達式爲：在sourceArray

標籤值選擇作爲標籤在sourceArray 值sourceArray表達式可以使用>對應於輸入的內部輸入的值的特殊$ viewValue變量。

該指令適用於promises，這意味着您可以使用> $ http服務以最小的努力檢索匹配。