从字符串的开头过滤 ng-repeat 元素答案

【问题标题】：Filter ng-repeat elements from the beginning of the string从字符串的开头过滤 ng-repeat 元素
【发布时间】：2013-12-09 09:08:12
【问题描述】：

我正在尝试使用 AngularJS，这是我的第一次尝试。我正在尝试使用“开始于”而不是“包含”之类的内容来过滤对象数组，但我不明白该怎么做。

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

[{
  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 个项目并查看它是否以传递的数字开头。

【问题讨论】：

您的数据模型包含整数，但您正在尝试对其使用字符串类型的过滤器。我相信您需要在过滤器中使用自定义比较器函数，该函数首先将整数转换为字符串。
几种处理方法..可以过滤控制器中的数据或创建自定义过滤器以用于标记。您是否只想搜索对象的特定属性？
@XMLilley 好的，我该如何开始？
@charlietfl 让我们从这个例子中的工作开始。我需要了解 AngularJS 的执行方式。

标签： angularjs filter

【解决方案1】：

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

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

【讨论】：

我正在尝试将其集成到我的应用程序中，有没有办法在 AngularJS 中有更清晰的错误？它们似乎有点神秘。我目前收到此“错误：[$injector:unpr] errors.angularjs.org/1.2.2/$injector/unpr?p0=myFilterFilterProvider%20%3C-%20myFilterFilter”
该错误的最后一部分是一个 URL。访问 URL……然后瞧。
谢谢，我正在尝试。

【解决方案2】：

Maxim 的回答对我有所帮助，但我想我会提供一个稍微更通用的解决方案来过滤平面列表或要过滤特定属性的对象列表。

View Plunkr

/**
 * Filter a list for elements with start with the given string.
 * 
 * @param {Array} items - The list of items to filter
 * @param {String} prefix - The prefix to search for
 * @param {String} [itemProperty] - An optional property to use for the search
 *                                  if filtering a list of objects.
 */
.filter('startsWith', function() {
  return function(items, prefix, itemProperty) {
    return items.filter(function(item) {
      var findIn = itemProperty ? item[itemProperty] : item;
      return findIn.toString().indexOf(prefix) === 0;
    });
  };
})

使用示例

// item in flatList | startswith:<term>
var flatList = ['foo', 'bar', 'zulu']

// item in objectList | startswith:<term>:<key>
var objectList = [
  {value: 'foo', label: '-FOO-'},
  {value: 'bar', label: '-BAR-'}
];

要使大小写不敏感，只需将.toLowerCase() 应用于前缀和findIn

【讨论】：