Angularjs 筛选从字符串开头重复的元素_Angularjs_Filter

Angularjs 筛选从字符串开头重复的元素

angularjs filter

Angularjs 筛选从字符串开头重复的元素,angularjs,filter,Angularjs,Filter,我正在尝试AngularJS，这是我第一次尝试。我试图使用“startswith”而不是“contains”来过滤对象数组，但我不知道如何做到这一点假设我有一个元素数组，如下所示 [{ amount: 50 }, { amount: 25 }] 如果我想按5进行筛选，则会显示两条记录，而我只想得到第一条记录，即以5开头的记录这就是我到目前为止所做的，对于循环部分（我还添加了排序和分页部分，即使可能不会影响我试图实现的目标）我不知道如何在这里创建自定义处理程序，以便分析每个第n项，

我正在尝试AngularJS，这是我第一次尝试。我试图使用“startswith”而不是“contains”来过滤对象数组，但我不知道如何做到这一点

假设我有一个

元素

数组，如下所示

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

如果我想按

进行筛选，则会显示两条记录，而我只想得到第一条记录，即以

开头的记录

这就是我到目前为止所做的，对于循环部分（我还添加了排序和分页部分，即使可能不会影响我试图实现的目标）

我不知道如何在这里创建自定义处理程序，以便分析每个第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>


{{element.amount}}

演示

马克西姆的回答对我很有帮助，但我想我应该提供一个更通用的解决方案，用于过滤平面列表或要过滤特定属性的对象列表

/**
 * 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;
    });
  };
})

/**
 * 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-'}
];

//平面列表中的项目|开始使用：
变量flatList=['foo'、'bar'、'zulu']
//objectList中的项| startswith:：
var objectList=[
{值：'foo'，标签：'-foo-'}，
{值：'bar'，标签：'-bar-'}
];

要使其不区分大小写，只需将

.toLowerCase（）

应用于前缀和

findIn

您的数据模型包含整数，但您正在尝试对其进行字符串类型筛选。我相信您需要在过滤器中使用一个自定义比较器函数，该函数首先将整数转换为字符串。有几种方法可以在控制器中过滤数据或创建用于标记的自定义过滤器。您只想搜索对象的特定属性吗？@XMLilley好的，我该如何开始？@charlietfl让我们从本例中的工作内容开始。我需要了解AngularJS这样做的方式。我正在尝试将其集成到我的应用程序中，有没有办法在AngularJS中有更清晰的错误？它们似乎有点神秘。我目前收到了这个“错误：[$injector:unpr]errors.angularjs.org/1.2.2/$injector/unpr？p0=myFilterFilterProvider%20%3C-%20myFilterFilter”错误的最后一部分是URL。访问URL。。。瞧，谢谢你，我正在尝试。

// 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-'}
];