按字母顺序排列的角度过滤器

Question

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

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

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

还有我的 JS 函数：

 pagesSearchBar.pageValueDidChange = function(value) {
    angular.element(document.getElementById('searchEngineController')).scope().activateFilter(value);
 };

谢谢！

Answer 1

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

https://docs.angularjs.org/api/ng/directive/ngRepeat

<li ng-repeat="page in pages | filter:x">

更彻底地阅读你的代码我认为你对角度逻辑也有一些误解。例如，您不需要额外的功能来检测搜索更改然后从 dom 获取范围。你可以这样做：

<input type="text" name="search" ng-change="activateFilter(this.value)">

类似的东西

更新

因此，如果我现在理解正确，您将只想显示一个过滤器结果。您可以通过某种方式将过滤器与 limitTo 组合来实现（现在没时间摆弄）

或者甚至作为临时解决方案使用 css：

.list.filtered .class-of-item {display:none;}
.list.filtered .class-of-item:first-child {display:block;}

更新 2

好的，现在我明白了，所以您想使用严格过滤，只显示以搜索词组开头的项目。 Angular 也为此做好了准备，请查看下面的 sn-p

angular.module('filterApp',[]);

angular.module('filterApp').controller('MainCtrl',['$scope',function($scope){
  $scope.items = ['Orange','Orangutan','Words','Orchid'];
  $scope.customComparator = function(actual, expected){
    return (actual.toLowerCase().indexOf(expected.toLowerCase()) === 0);
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="filterApp">
  <div ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in items | filter:'or':customComparator">{{item}}</li>
    </ul>
  </div>
</div>

比较器参考：https://docs.angularjs.org/api/ng/filter/filter

Answer 2

使用类似下面的东西：

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

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

我制作了这个plnkr，它有更多的功能。您可能会觉得这很有帮助。

Answer 3

filter in AngularJS named 'filter' 可以用更少的代码让你的生活更轻松。

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

从上面提到的链接复制粘贴示例：-

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

Answer 4

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

上面这行会改变它

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