Показывать только те строки выбранных объектов, чей подобъект имеет определенное значение, используя AngularJs

Question

Ниже используется JSON Содержит массив объектов (ветвь). Тогда у этих объектов есть подобъект, называемый «сервис». Я пытаюсь показать название филиала и его услуги. Но только те, с типом крем .

[
  {
    "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", если какая-либо ветвь (объект) не имеет какого-либо числа под-свойства "сливки", тогда ее 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>

Answer 1

Спасибо всем за помощь. Я получил свое решение. Вот код для вышеуказанной проблемы.

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

Answer 2

Для веток, у которых нет службы типа «сливки», вы можете написать функцию, которая фильтрует все службы, которые есть у конкретной ветки, и если служба с типом «сливки» не найдена, вернуть false, т.е. покажи эту ветку.

Аналогично, для сервисов вы можете вручную проверить каждый сервис, имеет ли он крем типа, таким образом вы будете печатать только branches с типом cream и 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;
    }

это должно сделать трюк