Фильтр AngularJS Поисковые термины спереди, а не по всему свойству

Question

Мне трудно понять, как именно отфильтровать результаты в моем приложении.

У меня есть массив gameList с кучей игровых объектов.Для наших целей давайте просто скажем, что я хочу искать только по game.name.Если у меня есть игра с именем Apple, игра с именем Orange и одна с именем Oddball.Прямо сейчас при вводе a в строку поиска все 3 записи будут отображаться, поскольку буква a содержится в Orange и Oddball.Я хочу, чтобы отфильтровывались Orange и Oddball, поскольку они не начинаются с a.Однако, если я наберу O, я бы хотел, чтобы Apple был отфильтрован, и тогда следующая буква в окне поиска (Or или Od) будет определять, что будет отфильтровано.

Iбыло трудно найти способ сделать это.Возможно, я просто не использую правильные условия поиска, когда ищу.Как сравнить мою переменную 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>  

Код контроллера:

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

Answer 1

Я выяснил, что если вы поместите пользовательский фильтр внутри 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>  

Код моего контроллера:

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

Answer 2

То, что вы заметили, это поведение фильтра - вы могли бы создать собственный фильтр, который смотрел бы в начале названия игры при совпадении с поисковым вводом; Демо-код ниже:

var app = angular.module('myApp', [])
  .controller("SearchController", ['$scope', '$http', function($scope, $http) {
    $scope.pageTitle = "Search (by first word onwards)";
    $scope.searchText = '';
    /*    $http.get("http://localhost/list?table=games").then(function (data) {        $scope.gameList = data.data.arr;                    }); 
        /* mocking games list */
    $scope.gameList = [{
      name: 'apple',
      numPlayers: 10,
      duration: 60
    }, {
      name: 'orange',
      numPlayers: 25,
      duration: 60
    }, {
      name: 'mango',
      numPlayers: 100,
      duration: 60
    }, {
      name: 'banana',
      numPlayers: 50,
      duration: 60
    }, {
      name: 'watermelon',
      numPlayers: 30,
      duration: 60
    }];
  }])
  .filter('firstWordFilter', function() {
    return function(val, toSearch) {
      var filteredArray = [];
      if (toSearch != '') {
        for (var i = 0; i < val.length; i++) {
          if (val[i].name.toLowerCase().search(toSearch.toLowerCase()) == 0) {
            filteredArray.push(val[i]);
          }
        }
        return filteredArray;
      }
      //Comment this else statement if you want nothing by-default
      else {
        return val;
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" 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 | firstWordFilter:searchText " class="gameDiv">
    <h3>{{game.name }}</h3>
    <p>{{game.numPlayers}} | {{game.duration}} |
      <a ng-href="#!game-info/{{game.gameId}}">More Info</a>
    </p>
  </div>
</div>