Fatal编程技术网
  • javascript/
  • Javascript 使用AngularJs仅显示其子对象具有特定值的选定对象行

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

javascript angularjs

Javascript 使用AngularJs仅显示其子对象具有特定值的选定对象行,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,以下是正在使用的JSON 它包含一个对象数组（分支）。然后，这些对象具有称为“服务”的子对象。我试图显示分行名称及其服务。但只有那些类型为的乳霜 [ { "b_sn": "1", "b_name": "Alambagh", "service": [ { "i_sn": "1", "i_name": "Vanilla", "i_type": "cream", "i_detail": ""

以下是正在使用的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”
的行，如果任何分支（对象）没有任何数量的子属性“cream”，则其
b_名称不应显示在表中

以下是页面的HTML代码：



锡。
分支机构名称
服务
{{br.b_sn}}。
{{br.b_name}
{{i.i_sn}}。{{i.i_name}
{{i.detail}}

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

同样，对于服务，您可以手动检查每个服务是否有cream类型，这样您将只打印其中有cream类型的
分支
，以及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>   



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

同样，对于服务，您可以手动检查每个服务是否有cream类型，这样您将只打印其中有cream类型的
分支
，以及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>   



这应该能帮上忙了
谢谢大家的帮助。
我找到了解决办法。下面是上述问题的代码


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




锡。
分支机构名称
服务
{{br.b_sn}}。
{{br.b_name}
{{i.i_sn}}。{{i.i_name}
{{i.detail}}
var-app=angular.module（'myApp'，[]）；
app.filter（'myFilter'，function（）{
返回函数（json，输入）{
log（json，输入）；
var new_json=[]；

对于（var i=0；我感谢大家的帮助。
我得到了我的解决方案。这是上面问题的代码


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




锡。
分支机构名称
服务
{{br.b_sn}}。
{{br.b_name}
{{i.i_sn}.{i.i_name}
{{i.detail}}
var-app=angular.module（'myApp'，[]）；
app.filter（'myFilter'，function（）{
返回函数（json，输入）{
log（json，输入）；
var new_json=[]；

对于（var i=0；iyou可能需要为您的第一次
ng repeat
@Aleksey Solovey感谢您的回答。我尝试过您的问题有点过于宽泛或混乱。我建议为您的逻辑创建一个简单的自定义筛选器。以下是我的尝试：。我过滤掉所有未将“i_type”设置为“cream”的内容对于行的所有元素。请随意修改code@AlekseySolovey-谢谢！但是我想用服务I_-type=cream显示每个分支。但是您的代码只显示那些带有所有I_-type cream的分支。@AlekseySolovey-谢谢。您的代码真的很有帮助。我做了一些修改。我已经在答案部分发布了解决方案。T再次感谢hanks。您可能需要为您的第一次
ng repeat
@Aleksey Solovey提供自定义筛选器。谢谢您的回答。我尝试过您的问题有点过于宽泛或混乱。我建议为您的逻辑创建一个简单的自定义筛选器。以下是我的尝试：。我过滤掉所有未将“I_type”设置为“cream”的内容对于行的所有元素。请随意修改code@AlekseySolovey-谢谢！但是我想用服务I_-type=cream显示每个分支。但是您的代码只显示那些带有所有I_-type cream的分支。@AlekseySolovey-谢谢。您的代码真的很有帮助。我做了一些修改。我已经在答案部分发布了解决方案。T又是汉克斯。