个人中心
gpt4 book ai didi

javascript - 如何在嵌套的 ngRepeat 中的第二个 ngRepeat 上应用过滤器？

转载 作者：行者123 更新时间：2023-11-30 00:33:22 31 4
gpt4 key购买 nike

我想将搜索框的 $filter 应用于嵌套的 ng-repeat。我有一个类别数组，每个类别都包含一个项目列表。当我将 $filter 放在第一个 ngRepeat 上时，它会过滤并保留具有正确项目的类别。但是，我只想在项目列表中进行过滤。
我创建了一个 Plnkr 来展示我的示例。 http://plnkr.co/edit/KIsn9ZPuIqUMlwkORnrE 

angular.module('myapp',[])
.controller('AllCtrl', function($scope){
  $scope.data = [
      {name: "ebooks", items: [
        {name: "Learning AngularJS", type: "pdf"}, 
        {name: "Learning Javascript", type: "pdf"},
      ]},
      {name: "books", items: [
        {name: "AngularJS for dummy", type: "old"},
        {name: "Javascript for dummy", type: "new"}
        ]}
    ];
});

HTML 文件:

    <!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.4.0-beta.3/angular.js" data-semver="1.4.0-beta.3" data-require="angular.js@*"></script>
    <script data-require="firebase@*" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap-css@*" />
    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>
  </head>

  <body ng-app="myapp">
    <div class="col-md-9" ng-controller="AllCtrl">
      <input type="text" class="form-control" placeholder="Search here..." ng-model="search" />
      <div style="height: 10px"></div>
      <div ng-repeat="cat in data | orderBy: 'name' | filter:search">
        <button class="btn btn-primary btn-sm">{{$index +1}}</button> Category: {{cat.name}}
            <dl class="dl-horizontal" ng-repeat="item in cat.items">
          <dt>{{item.name}}</dt>
          <dd>{{item.type}}</dd>
        </dl>
      </div>
    </div>
  </body>

</html>


请帮我。
谢谢

最佳答案

如果您想过滤内部项目列表，请在该列表本身中指定过滤器。

为内部 ng-repeat 设置过滤器已经解决了您的问题。

<div ng-repeat="cat in data | orderBy: 'name'">
    <button class="btn btn-primary btn-sm">{{$index +1}}</button> Category: {{cat.name}}
    <dl class="dl-horizontal" ng-repeat="item in cat.items | filter:search">
        <dt>{{item.name}}</dt>
        <dd>{{item.type}}</dd>
    </dl>
</div>

这里是 Working Fiddle

希望对您有所帮助。谢谢。

关于javascript - 如何在嵌套的 ngRepeat 中的第二个 ngRepeat 上应用过滤器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28315310/

31 4 0
文章推荐： Javascript 打印多个网页 iFrame 内容(打印所有按钮)
文章推荐： mysql - 在MySQL中加载带有特殊字符的数据
文章推荐： mysql - 在 where 子句中使用日期范围作为列名
文章推荐： Android Firebase 否定 ServerValue.TIMESTAMP 用于订购
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com