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

Question

以下是正在使用的JSON 它包含一个对象数组（分支）。然后这些对象有子对象称为 "service"。我正在尝试显示分支名称及其服务。但只有类型为 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 不应显示在 table.

中

以下是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>

Answer 1

对于没有 'cream' 类型服务的分支机构，您可以编写一个函数来过滤特定分支机构拥有的所有服务，如果没有找到 'cream' 类型的服务，则 return false 即不显示该分支。

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

像这样：

<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;
    }

这应该可以解决问题

Answer 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>

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

Show only those rows of selected objects whose sub object has a specific value using AngularJs

javascript

angularjs

angularjs-ng-repeat