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

使用ng-repeat和filter,如何分辨哪些项目是可见的?

彭阳朔
2023-03-14
问题内容

我有使用Angular应用程序显示的一系列对象ng- repeat。我正在使用filter和搜索输入的值过滤掉项目。它按预期工作。但是,我有一个“全部选中” /“全部取消选中”选项,我只想选择列表中的
可见 项(那些符合当前搜索条件的项)。

在控制器中不执行相同逻辑(即indexOf在每个对象上使用搜索值)的情况下,如何确定当前由ng-repeat/ 过滤掉的项目filter

我的看法:

<input type="text" ng-model="searchValue">
<input type="checkbox" ng-model="checkAll" ng-change="toggleAll()">

<tr ng-repeat="item in items | filter:searchValue">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
</tr>

我的控制器中的一个功能:

$scope.toggleAll() {
     for(var i in $scope.items){
         // how can I tell if this item is filtered out in the view?
     }
}

为了简化起见,我在这里大大简化了我的代码示例,因为这个问题不需要更多细节。有没有办法做我在想的还是我需要再次执行“搜索”?


问题答案:

您可以将过滤后的数组绑定到视图中的另一个作用域变量,然后在控制器中访问它。

视图:

<tr ng-repeat="item in filteredItems = (items | filter:searchValue)">
  ...
</tr>

控制器:

$scope.toggleAll = function () {
  angular.forEach($scope.filteredItems, function (item) {
    // do stuff
  })
}


 类似资料:
  • 问题内容: 我正在尝试将结果集限制为固定数量。我可以与一起使用,但这会限制项目,无论它们当前的可见性如何,并从DOM中删除项目。我想限制所有可见项目,同时将所有内容保留在DOM中。 这是我当前的代码。我的目标是即使列表中包含500个项目,也始终不超过50 个项目。 最初将限制为50个项目,但是如果我过滤列表(通过修改某些项目上的item.visible),该列表将永远不会显示50-500范围内的项

  • 问题内容: 我是新手并尝试学习过滤器的概念,但在我的情况下是两次调用过滤器,我期望过滤器只运行一次,但运行两次。不能理解为什么会这样。 这是我的 朋克 … 问题答案: 如果我没有把你的问题弄错的话,这就是这里的问题 Angularjs 使用“脏检查”方法,因此需要调用所有过滤器以查看是否存在任何更改。此后,它检测到一个变量(您键入的变量)有变化,然后再次执行所有过滤器以检测是否有其他变化。 这是另

  • 问题内容: 我有这个代码。 http://jsfiddle.net/0tgL7u6e/ JavaScript 视图 我不知道为什么订单不起作用,为什么过滤器不起作用。 在另一个问题上,我读到一些关于对象无法过滤或排序的信息。但是我上面有一个对象数组。此外,它应该工作! 有什么问题? 问题答案: 要对过滤器使用跟踪,必须在过滤器后面添加按表达式跟踪。 这是工作

  • 问题内容: 我有一个模板,仅当当前项目与上一个项目具有某些不同的字段时,才想在其中生成一些HTML。如何在ng-repeat中访问上一个项目? 问题答案: 你可以做类似的事情 JS 演示:小提琴 注意: 是针对指令数组的,它可能与作用域数组不同。使用内联变量访问正确的数组。 如果您筛选或订购,则为。

  • 问题内容: 我正在尝试使用条件将项目分组为ng-repeat。 一个示例条件是将所有元素分组为同一小时。 数据: “时间”字段实际上是一个时间戳记(1399372207),但是使用准确的时间,示例输出将更易于理解。 我正在使用ng-repeat列出这些项目: 还尝试了: 有效输出为: 如果没有针对我的问题的简单解决方案,我的最后选择是将数据分组,然后将其分配给ng-repeat中使用的作用域变量。

  • 问题内容: 我正在尝试将$ sce.trustAsHtml()与ng- repeat中的对象属性一起使用。结果是HTML完全空白。不过,使用ngSanitize可以正确输出HTML。 顺便说一下,我正在使用AngularJS v1.3.0-beta.3。不知道是否有错误或我做错了什么。 问题答案: 您不能在表达式中使用(除非是的属性),因为表达式是在的上下文中求值的。 最干净的方法是使用。 第二种