angularjs – 从字符串的开头过滤ng-repeat元素

发布时间：2020-12-17 17:47:59 所属栏目：安全来源：网络整理

导读：我正在试验AngularJS,这是我的第一次尝试.我正在尝试使用“开头”而不是“包含”之类的东西来过滤对象数组,但我不知道如何做到这一点. 假设我有一个像这样的元素数组 [{ amount: 50},{ amount: 25}] 如果我想要按5过滤,则会显示两个记录,而我只想要第一个记

我正在试验AngularJS,这是我的第一次尝试.我正在尝试使用“开头”而不是“包含”之类的东西来过滤对象数组,但我不知道如何做到这一点.

假设我有一个像这样的元素数组

[{
  amount: 50
},{
  amount: 25
}]

如果我想要按5过滤,则会显示两个记录,而我只想要第一个记录,即以5开头的记录.

这是我到目前为止所做的,对于循环部分(我还添加了排序和分页部分,即使可能没有影响我想要实现的目标)

<tr ng-repeat="element in elements | filter:search:strict | orderBy:predicate:reverse | filter:startFrom:currentPage*pageSize | limitTo:pageSize">
  <td>{{element.name}}</td>
  <td>{{hotel.amount}}</td>
</tr>

并为我写“5”的输入

<input class="pull-right" ng-model="search.amount">

我不明白如何在这里创建一个自定义处理程序,以便我可以解析每个第n项,看看它是否以传递的数字开头.

解决方法

我只想写基本的自定义过滤器：

var iApp = angular.module("App",[]);

 iApp.filter('myfilter',function() {

   function strStartsWith(str,prefix) {
    return (str+"").indexOf(prefix) === 0;
   }


   return function( items,amount) {


    var filtered = [];

    angular.forEach(items,function(item) {
      if(strStartsWith(item.amount,amount)){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

    iApp.controller('TestController',function($scope)
    {   
       $scope.amount='';

       $scope.elements = [
         { amount: 50},{ amount: 25 }];                
     });

HTML

<body data-ng-controller="TestController">

  <input class="pull-right" ng-model="amount">

        <table id="hotels">
            <tr data-ng-repeat="element in elements | myfilter:amount">
                <td>{{element.amount}}</td>
            </tr>
        </table>
        <br/>

    </body>

演示Plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!