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

angularjs-如何根据其属性之一的值在控制器中获取ng-repeat过滤器中某项的索引?

诸葛砚文
2023-03-14
问题内容

我在html文件中使用ng-repeat来显示已过滤的项目:

<li ng-repeat="item in (filteredItems = (items | filter:query))">
  {{ item.name }}
</a>

在控制器中,我想基于他的属性之一获取项目的索引。

精度:我想 在过滤列表中 而不是整个列表中获取 索引

例如,这里将是女巫名称is的索引some_item_7

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope',
  function MyCtrl($scope) {

    $scope.query = 'some';

    $scope.items = 
    [
      { name: 'some_item_1' },
      { name: 'another_item_2' },
      { name: 'some_item_3' },
      { name: 'another_item_4' },
      { name: 'some_item_5' },
      { name: 'another_item_6' },
      { name: 'some_item_7' },
      { name: 'another_item_8' },
      { name: 'some_item_9' }
    ];

    $scope.itemNext = function (item) {
      console.log(item.name);
    };

    $scope.getIndexFromName = function (name) {
      console.log("trying to get the index of the item with name = " + name);
    }

    $scope.getIndexFromName('some_item_7');

  }
]);

http://plnkr.co/edit/C8gL9qV1MyonTwDENO9L?p=preview

任何想法 ?


问题答案:

您的ng-repeat表达式将在您的作用域上创建filteredList数组。
<li ng-repeat="item in (filteredItems = (items | filter:query))">

您可以像遍历任何数组一样遍历它,检查与name参数匹配的项。 $scope.filteredItems

这是一个演示:http :
//plnkr.co/69nnbaZaulgX0odG7g7Y

更新
您的评论表明您不想等待ng-repeat创建已过滤项目的数组。您可以使用$
filter服务在页面加载之前轻松地初始化同一数组。用:

$scope.filteredItems = $filter('filter')($scope.items, {name: $scope.query}, false)

这样做不会干扰在创建DOM期间ng-repeat将其过滤结果保存到同一filteredItems数组中。

这是一个更新的(交互式) 演示: http
//plnkr.co/NSvBz1yWvmeFgXITutZF


 类似资料:
  • 问题内容: 是否可以过滤对象数组,从而使属性的值可以是几个值(或条件)中的任一个 而无需编写自定义过滤器 这类似于此问题-Angular.js ng-repeat:按单个字段过滤 但是代替 是否可以做这样的事情 对于以下示例数据- 我尝试失败 问题答案: 最好的方法是使用一个函数: 另外,您可以使用ngHide或ngShow根据特定条件动态显示和隐藏元素。

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

  • 问题内容: 我的过滤器很少 在我的项目中,要获得良好的结果,我必须在控制器中进行此过滤,而不是在视图中 我知道基本的语法,但我不知道如何在控制器中制作过滤器链,因此一切都将如模板中的示例一样工作。 我找到了一些解决方案,现在仅使用一个过滤器,但是应该可以用于许多;) 我在ng-repeat中使用此功能可以正常工作,但是我必须使用少量过滤器进行检查。 问题答案: 您只需重新过滤您从第一个过滤器返回的

  • 问题内容: jsfiddle http://jsfiddle.net/KfSBq/ 所谓子对象,是指我用ng-repeat显示的所有对象在其内部都包含一个对象列表,并且我希望根据这些子对象之一的属性进行过滤。 仅此一项就非常简单。我有个对象,每个对象都包含和对象列表: 我按类别显示它们: 我的问题是现在仍然显示不包含任何条目的日常对象。如何实现一种情况,如果过滤使列表为空,则该列表也不显示? 问题

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

  • 问题内容: 除了呈现对象中属性的值之外,我还想将属性名称呈现为标签。有办法做到这一点吗?例如: 可能会吐出这样的东西: 问题答案: 试试这个: