Javascript AngularJS从前面而不是整个属性筛选搜索词

我很难弄清楚如何在我的应用程序中过滤出结果

我有一个数组

gameList

，里面有一堆游戏对象。出于我们的目的，我只想通过

game.name

进行搜索。如果我有一个名为苹果的游戏，一个名为橙色的游戏，还有一个名为怪球的游戏。现在，在搜索栏中键入

a

仍会保留所有3个条目，因为字母

a

包含在

橙色

和

古怪

中。我想做的是过滤掉

Orange

和

Oddball

，因为它不是以

a

开头的。但是，如果我键入一个

O

，我希望

Apple

被过滤掉，然后搜索框中的下一个字母（

或
或
Od
）将确定过滤掉的内容

我费了好大劲才找到这样做的方法。我可能只是在寻找时没有使用正确的搜索词。如何将变量
searchText
与
game.name
从一开始与整个字符串进行比较

视图/页面代码：

<div ng-controller="SearchController" class="content"> 
  <h2 id="pageTitle">{{pageTitle}}</h2>

  <label>Search: <input placeholder="What are you looking for?" ng-model="searchText"></label>
  <div ng-repeat="game in gameList | filter:searchText" class="gameDiv">
    <h3>{{game.name}}</h3>
    <p>{{game.numPlayers}}</p>
    <p>{{game.duration}}</p>
    <a ng-href="#!game-info/{{game.gameId}}">More Info</a>
  </div>    
</div>  

你观察到的是过滤器的行为-你可以做的是创建一个自定义过滤器，当匹配搜索输入时，它会查看游戏名称的开头；演示代码如下：


var-app=angular.module（'myApp'，[]）
.controller（“SearchController”、[“$scope”、“$http”，函数（$scope，$http）{
$scope.pageTitle=“搜索（从第一个单词开始）”；
$scope.searchText=''；
/*$http.get（“http://localhost/list?table=games）然后（函数（数据）{$scope.gameList=data.data.arr；}）；
/*模拟游戏列表*/
$scope.gameList=[{
名称：'苹果'，
就业人数：10人，
持续时间：60
}, {
名称：“橙色”，
就业人数：25人，
持续时间：60
}, {
名称：'芒果'，
就业人数：100人，
持续时间：60
}, {
名称：'香蕉'，
就业人数：50人，
持续时间：60
}, {
名字：“西瓜”，
就业人数：30人，
持续时间：60
}];
}])
.filter（'firstWordFilter'，function（）{
返回函数（val，toSearch）{
var filteredArray=[]；
如果（toSearch！=''）{
对于（变量i=0；i

{{pageTitle}}
搜索：
{{game.name}
{{game.numPlayers}}{{game.duration}}|

您观察到的是过滤器的行为-您可以做的是创建一个自定义过滤器，在匹配搜索输入时查看游戏名称的开头；演示代码如下：


var-app=angular.module（'myApp'，[]）
.controller（“SearchController”、[“$scope”、“$http”，函数（$scope，$http）{
$scope.pageTitle=“搜索（从第一个单词开始）”；
$scope.searchText=''；
/*$http.get（“http://localhost/list?table=games）然后（函数（数据）{$scope.gameList=data.data.arr；}）；
/*模拟游戏列表*/
$scope.gameList=[{
名称：'苹果'，
就业人数：10人，
持续时间：60
}, {
名称：“橙色”，
就业人数：25人，
持续时间：60
}, {
名称：'芒果'，
就业人数：100人，
持续时间：60
}, {
名称：'香蕉'，
就业人数：50人，
持续时间：60
}, {
名字：“西瓜”，
就业人数：30人，
持续时间：60
}];
}])
.filter（'firstWordFilter'，function（）{
返回函数（val，toSearch）{
var filteredArray=[]；
如果（toSearch！=''）{
对于（变量i=0；i

{{pageTitle}}
搜索：
{{game.name}
{{game.numPlayers}}{{game.duration}}|

我发现，如果您将自定义筛选器放在ng repeat中，如下所示：
filter:myFilter
并替换搜索框输入，而不是在自定义筛选器函数中引用
searchText
，那么使用str.substring函数可以相当轻松地实现这一点

页面/视图代码：

<div ng-controller="SearchController" class="content"> 
  <h2 id="pageTitle">{{pageTitle}}</h2>

  <label>Search: <input placeholder="What are you looking for?" ng-model="searchText"></label>
  <div ng-repeat="game in gameList | filter:myFilter" class="gameDiv">
    <h3>{{game.name}}</h3>
    <p>{{game.numPlayers}}</p>
    <p>{{game.duration}}</p>
    <a ng-href="#!game-info/{{game.gameId}}">More Info</a>
  </div>    
</div>  

我发现，如果您将自定义筛选器放在ng repeat中，如下所示：
filter:myFilter
并替换searchbox输入，而不是在自定义筛选器函数中引用
searchText
，那么使用str.substring函数可以相当容易地实现这一点

页面/视图代码：

<div ng-controller="SearchController" class="content"> 
  <h2 id="pageTitle">{{pageTitle}}</h2>

  <label>Search: <input placeholder="What are you looking for?" ng-model="searchText"></label>
  <div ng-repeat="game in gameList | filter:myFilter" class="gameDiv">
    <h3>{{game.name}}</h3>
    <p>{{game.numPlayers}}</p>
    <p>{{game.duration}}</p>
    <a ng-href="#!game-info/{{game.gameId}}">More Info</a>
  </div>    
</div>  

rwagApp.controller("SearchController",  ['$scope', '$http', function($scope, $http) {
    $scope.pageTitle = "Search";
    $scope.searchText = '';
    $http.get("http://localhost/list?table=games").then(function (data) {
        $scope.gameList = data.data.arr;                
    }); 

    // custom filter
    $scope.myFilter = function (game) {
        if ($scope.searchText === '') return true; //shows the entire list when the page boots up
        return game.name.substring(0, $scope.searchText.length) === $scope.searchText; //compares `game.name`'s first `searchText.length` number of characters with `$scope.searchText`
    };
}]);