Javascript 按字母顺序排列的角滤波器

我是个新手。我正在尝试向我的控制器添加一个过滤器参数，该参数将按单词中的每个字母按字母顺序过滤搜索。想象一下，我的数据包含以下几个词：马、橘子、终结者、摩托罗拉、花卉、整形外科。当我在搜索引擎中搜索“或”时，所有的单词都会出现在结果中，因为它们都包含“或”。相反，我希望有一个过滤器能够严格按照字母顺序过滤我的数据，这样我就只能得到“橘子”和“骨科”

这是我控制器中的当前过滤器：

$scope.activateFilter = function(textBoxValue) {
  $scope.$apply(function() {
    if ( textBoxValue=="") {
      $scope.pages = FacebookPage.userPages;
    } else {
      $scope.pages=$filter('filter')($scope.pages,{name:textBoxValue});
    }
  });
};

这是用于筛选的HTML，以防它有帮助：

<div id="searchEngineController" ng-controller="SearchEngineController">
    <ul class="rig">
        <li ng-repeat="page in pages">
            <a ng-click="pageClick($index)">
                <img src= "{{page.image}}" class="img-responsive img-circle" height="140" width="240">
                <p style="font-size:25px; text-align:center">{{page.name}}<p>
            </a>
        </li>
    </ul>
</div>

---

谢谢

你正在重新发明轮子。检查ng repeat的角度内置过滤器

更新2

好的，现在我明白了，所以您希望使用严格的过滤方式，只显示以搜索短语开头的项目。Angular也准备好了，请查看下面的代码片段

angular.module（'filterApp'，[]）；
角度.module（'filterApp'）。控制器（'MainCtrl'，['$scope'，函数（$scope）{
$scope.items=[‘橙色’、‘猩猩’、‘文字’、‘兰花’]；
$scope.customComparator=函数（实际、预期）{
返回值（实际的.toLowerCase（）.indexOf（预期的.toLowerCase（））==0）；
}
}]);


{{item}

使用类似以下内容：

<input type="search" data-ng-model="searchName">
<li ng-repeat="list in lists | filter:searchName">{{list}}</li>


{{list}

angular.js已经提供了这个过滤器，它本身非常强大，非常健壮

我做了这个，它有更多的特点。你可能会发现这很有帮助

$scope.pages=$filter('filter')($scope.pages,{name:textBoxValue},true);

上面这一行会改变它

$scope.pages = $filter('filter')($scope.pages,function(index, value){
 return value === textBoxValue;
},true);

有一种方法可以让你的生活更加简单，代码更少

您可以对其进行微调以对对象中的所有字段执行搜索，也可以限制对某些特定字段的搜索

从上述链接复制粘贴示例：-

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>
<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>


搜索：
电话
{{friend.name}
{{朋友.电话}

任何：

仅限姓名

仅限电话

平等性

电话
{{friendObj.name}
{{friendObj.phone}
此解决方案不会按顺序过滤每个字母（如果我在搜索框中键入“或”，马仍会出现在我的搜索结果中），并且不适用于我的应用程序结构（我必须重新发明轮子的原因）@jgozaI不知道“按顺序过滤每个字母”是什么意思。如果你有什么特殊要求为什么不使用angular的过滤器，你需要在你的问题中很好地解释它们，然后我们可以帮助我编辑我之前的评论，更好地解释我所说的“按顺序排列的每个字母”，尽管我已经在我的问题中解释过了。当我写“或”时，应该只显示“橙子”，而不是“马”@jgozal好的，我明白了，所以你想要和angular的过滤器一样的功能，但只返回第一个结果？啊哈！我想我现在知道了-斯塔克沃夫的新朋友Hey Vaibhav，谢谢你。不幸的是，我的应用程序结构要求我在控制器中创建过滤器。您建议的解决方案仍然不会按顺序过滤每个字母（如果我在搜索框中键入“或”，则马仍会出现在我的搜索结果中）您看了这个问题吗？我正在检查它，但它似乎不能解决我的问题。我不是在找一个精确的过滤器。有了一个精确的过滤器，我必须输入“oranges”才能找到结果“oranges”。我希望能够在结果中输入“or”并得到“oranges”，但不是“horses”。这是有意义的，但由于某些原因它不起作用：（谢谢@Kumar Sambhav-我使用angular的过滤器，但在我的控制器中（我不能在我的html中使用它，因为我的应用程序是结构化的）。即使我可以在html中使用filter，我也不认为你的解决方案能解决我的问题。我不想找一个普通的过滤器（因为当我搜索“或”时，结果中会显示“马”），我也不想找一个严格/精确的过滤器（因为那时我必须输入“oranges”才能在结果中得到“oranges”）。我希望能够搜索“或”，并且只得到以“或”开头的单词，比如“oranges”和“Orthopediac”
<input type="search" data-ng-model="searchName">
<li ng-repeat="list in lists | filter:searchName">{{list}}</li>

$scope.pages=$filter('filter')($scope.pages,{name:textBoxValue},true);

$scope.pages = $filter('filter')($scope.pages,function(index, value){
 return value === textBoxValue;
},true);

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>
<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>