使用AngularJs仅显示其子对象具有特定值的选定对象的那些行答案

【问题标题】：Show only those rows of selected objects whose sub object has a specific value using AngularJs使用AngularJs仅显示其子对象具有特定值的选定对象的那些行
【发布时间】：2018-09-04 10:28:29
【问题描述】：

以下是使用的 JSON 它包含一个对象数组（分支）。然后这些对象具有称为“服务”的子对象。我正在尝试显示分支名称及其服务。但仅限类型为 cream 的人。

[
  {
    "b_sn": "1",
    "b_name": "Alambagh",
    "service": [
      {
        "i_sn": "1",
        "i_name": "Vanilla",
        "i_type": "cream",
        "i_detail": ""
      },
      {
        "i_sn": "2",
        "i_name": "Orange",
        "i_type": "candy",
        "i_detail": ""
      }
    ]
  },
  {
    "b_sn": "2",
    "b_name": "Aminabad",
    "service": [
      {
        "i_sn": "3",
        "i_name": "Butterscotch",
        "i_type": "cream",
        "i_detail": ""
      },
      {
        "i_sn": "4",
        "i_name": "Blueberry",
        "i_type": "cream",
        "i_detail": ""
      }
    ]
  },
  {
    "b_sn": "3",
    "b_name": "Hazratganj",
    "service": [
      {
        "i_sn": "1",
        "i_name": "Orange",
        "i_type": "candy",
        "i_detail": ""
      },
      {
        "i_sn": "2",
        "i_name": "Mango",
        "i_type": "candy",
        "i_detail": ""
      }
    ]
  }
]

我只想显示那些有i_type ="cream" 的行，如果任何分支（对象）没有任何数量的子属性“cream”，那么它的b_name 不应该显示在表格中。

以下是页面的HTML代码：

<table>
  <tr>
    <th>SN.</th>
    <th>Branch Name</th>
    <th>Services</th>
  </tr>
  <tr data-ng-repeat="br in branches">
    <td>{{br.b_sn}}.</td>
    <td>{{br.b_name}}</td>
    <td>
      <table>
        <th></th>
        <tr data-ng-repeat="i in br.service">
          <td style="width:70%">{{i.i_sn}}. {{i.i_name}}</td>
          <td>{{i.detail}}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【问题讨论】：

您可能需要为您的第一个 ng-repeat 自定义过滤器
@Aleksey Solovey 感谢您的回复。我尝试了
您的问题有点过于宽泛或令人困惑。我建议为您的逻辑创建一个简单的 custom 过滤器。这是我的尝试：Plunker。对于该行的所有元素，我过滤掉没有将“i_type”设置为“cream”的所有内容。随意修改代码
@AlekseySolovey - 谢谢！但我想用服务 i_type=cream 显示每个分支。但是您的代码只显示那些带有所有 i_type 奶油的分支。
@AlekseySolovey - 谢谢。你的代码真的很有帮助。我做了一些修改。我已经在答案部分发布了解决方案。再次感谢。

【解决方案1】：

对于没有“cream”类型服务的分支，您可以编写一个函数来过滤特定分支拥有的所有服务，如果没有找到“cream”类型的服务，则返回 false，即不要显示那个分支。

同样，对于服务，您可以手动检查每个服务是否具有 cream 类型，这样您将只打印类型为 cream 的 branches 和类型为 cream 的 services

类似这样的：

<table>
   <tr>
     <th>SN.</th>
     <th>Branch Name</th>
     <th>Services</th>
   </tr>
   <tr ng-if="creamCheck(br)" data-ng-repeat="br in branches">
     <td>{{br.b_sn}}.</td>
     <td>{{br.b_name}}</td>
     <td>
        <table>
           <th></th>
           <tr ng-if="i.i_type==='cream'" data-ng-repeat="i in br.service">
             <td style="width:70%">{{i.i_sn}}. {{i.i_name}}</td>
             <td>{{i.detail}}</td>
           </tr>
        </table>
     </td>
   </tr>
</table>

并将creamCheck函数写成：

 $scope.creamCheck = function(branch)
    {
        var arr = ($filter('filter')(branch.service, { i_type: 'cream' }));
        if (arr.length>0) {
            return true;
        }
        else
            return false;
    }

这应该可以解决问题

【讨论】：

【解决方案2】：

感谢大家的帮助。我得到了我的解决方案。这是上述问题的代码。

    <div ng-app="myApp" ng-controller="myCtrl">

      <table class="table">
        <tr>
          <th>SN.</th>
          <th>Branch Name</th>
          <th>Services</th>
        </tr>
        <tr data-ng-repeat="br in branches | myFilter: {'key':key}">
          <td>{{br.b_sn}}.</td>
          <td>{{br.b_name}}</td>
          <td>
            <table>
              <tr data-ng-repeat="i in br.service|filter :{i_type:'cream'}">
                <td>{{i.i_sn}}. {{i.i_name}}</td>
                <td>{{i.detail}}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

    </div>

    <script>
      var app = angular.module('myApp', []);
      app.filter('myFilter', function() {
        return function(json, input) {
          console.log(json, input);
          var new_json = [];
          for(var i=0; i<json.length; i++){
            var flag = false;
            for(var j=0; j<json[i].service.length; j++){
              if(json[i].service[j].i_type == input.key){
                flag = true;
                  break;
              }
              else{
                flag = false;

              }
            }
            if(flag){
              new_json.push(json[i]);
            }
          }
          return new_json;
        };
      });
      app.controller('myCtrl', function($scope) {
        $scope.key = "cream";
        $scope.branches = [
          {
            "b_sn": "1",
            "b_name": "Alambagh",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Vanilla",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "2",
            "b_name": "Aminabad",
            "service": [
              {
                "i_sn": "3",
                "i_name": "Butterscotch",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "4",
                "i_name": "Blueberry",
                "i_type": "cream",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "3",
            "b_name": "Hazratganj",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Mango",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          }
        ];

      });
    </script>

【讨论】：