Question

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

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

$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也准备好了，请查看下面的代码段

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

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

4 个答案: