angular 按字母顺序过滤

Question

我是 angular 的新手。我正在尝试向我的控制器添加一个过滤器参数，该参数将按字母顺序按单词中的每个字母过滤搜索。想象一下我的数据包含以下词：马、橙子、终结者、摩托罗拉、花卉、骨科。当我在我的搜索引擎中搜索 "or" 时，所有单词都会出现在结果中，因为它们都包含 "or." 相反，我想要一个过滤器来严格按照字母顺序过滤我的数据，所以我会只得到 "oranges" 和 "orthopedic"

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

$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

你是在重新发明轮子。检查 angular ng-repeat

的内置过滤器

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

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

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

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

类似的东西

更新

所以如果我现在理解正确的话，您将希望只显示一个过滤器的结果。您可以通过某种方式 将过滤器与 limitTo 组合来实现（现在没时间 fiddle）

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

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

更新 2

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

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

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

上面这行会改变它

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

Answer 4

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

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

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

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

angular 按字母顺序过滤

angular filter in order by letter

javascript

angularjs

angular-filters