当前位置: 首页 > 面试题库 >

在AngularJS中使用ng-repeat过滤结果6到10的100

邵胜涝
2023-03-14
问题内容

limitTo在文档中看到了过滤器,该过滤器允许我限制前5个或最后5个结果,但是我想设置限制的起始位置,以便显示第二组5个结果。

是否有内置的过滤器?


问题答案:

从Angular
1.4.0开始,limitTo过滤器接受一个可选begin参数:

<div ng-repeat="item in items | limitTo:5:5">{{item}}</div>

在旧版本中,编写自定义过滤器非常简单。这是一个简单的实现Array#slice(请注意,您传递的是第一个和最后一个索引,而不是一个计数):

app.filter('slice', function() {
  return function(arr, start, end) {
    return (arr || []).slice(start, end);
  };
});



<div ng-repeat="item in items | slice:6:10">{{item}}</div>

可用的jsFiddle:http://jsfiddle.net/BinaryMuse/vQUsS/

或者,您可以简单地窃取Angular
1.4.0的整个实现limitTo

function limitToFilter() {
  return function(input, limit, begin) {
    if (Math.abs(Number(limit)) === Infinity) {
      limit = Number(limit);
    } else {
      limit = toInt(limit);
    }
    if (isNaN(limit)) return input;

    if (isNumber(input)) input = input.toString();
    if (!isArray(input) && !isString(input)) return input;

    begin = (!begin || isNaN(begin)) ? 0 : toInt(begin);
    begin = (begin < 0 && begin >= -input.length) ? input.length + begin : begin;

    if (limit >= 0) {
      return input.slice(begin, begin + limit);
    } else {
      if (begin === 0) {
        return input.slice(limit, input.length);
      } else {
        return input.slice(Math.max(0, begin + limit), begin);
      }
    }
  };
}


 类似资料:
  • 问题内容: 我正在尝试做类似的事情: AngularJs部分: 但是不知何故,它向我展示了所有物品。如何筛选(键,值)? 问题答案: Angular 过滤器只能通过angular的API应用于数组,而不能应用于对象- “从数组中选择项的子集,并将其作为新数组返回。” 您在此处有两个选择: 1)移至数组或 -2)预过滤项目,如下所示: 并在控制器上: jsfiddle :http : //jsfid

  • 问题内容: 我正在运行一个简单的JSON文件,并希望获取类别名称。大约有100个对象,每个对象都属于一个类别-但是只有大约6个类别。 我当前的代码是这样的: 输出是100个不同的选项,大部分重复。我该如何使用Angular来检查a是否已经存在,如果已经存在则不创建选项? 编辑:在我的javascript中,只是为了澄清 问题答案: 您可以使用AngularUI 的 唯一 过滤器(此处提供源代码:A

  • 问题内容: 我是AngularJS的新手,我正在构建一个小型的概念验证租车清单应用程序,该应用程序会提取一些JSON,并通过ng- repeat并使用几个过滤器来呈现这些数据的各个部分: 现在,我想在控制器中创建一个自定义过滤器,该过滤器可以迭代ng-repeat中的项目,并仅返回满足特定条件的项目-例如,我可以根据哪个“ provider”复选框创建值数组进行检查,然后评估每个ng-repeat

  • 问题内容: 我正在使用ng-repeat使用jQuery和TB构建手风琴。出于某种原因,这在进行硬编码时可以很好地工作,但是在ng-repeat指令内部时无法触发点击。 我以为问题出在jQuery,而不是事实之后绑定的元素。因此,我认为与其在页面加载时加载脚本,不如在返回数据时在.success上加载函数会更好。不幸的是,我不知道该如何做。 测试页 :http : //staging.conver

  • 问题内容: 我想知道Angular中是否有一种简单的方法,可以使用特定的列(而非逻辑)来过滤表。现在,当我的过滤器实际上只需要过滤2列数据(ID和Name)时,它就会搜索表中的所有内容(10列以上的数据)。 我设法使它仅在过滤时仅查看这两列(通过根据文档在过滤器表达式中使用一个对象并查看此SO答案,但是它使用的是逻辑,太具体了。我想让它使用逻辑,但是遇到了麻烦。 我的HTML 我的过滤逻辑: 过滤

  • 问题内容: 我想在ng-repeat中使用正则表达式。我尝试了以下代码,但无法正常工作。 我有用户数组,我只想显示类型为c5的用户。 如果我用 然后它也以“ ac5x”类型显示用户,因为它包含c5。 我怎么解决这个问题?也许还有另一种解决方案。 谢谢! 问题答案: Tosh提到的内容应该对您有用! 如果您发现自己想更频繁地使用正则表达式进行过滤,则可以创建一个自定义过滤器。像这样的小提琴使您可以指