基于级联下拉列表中的选定值将角度JS中的嵌套JSON数据加载到ng-modal弹出窗口中

Question

我正在尝试使用Angular JS为具有三级嵌套结构的JSON文件构建一段代码。第一级是汽车的类型，第二级是制造商，第三级是服务提供商。给定文件名＆＃34; types.json＆＃34;。

，JSON文件如下所示

JSON文件：

<!-------------------JSON file :"types.json"------------------------>
[
{"name":"Taxi","value":"taxi", <!--Level-1-->
    "manuf":[
        {"name":"Tata Indica", <!--Level-2-->
            "servprov":[
                {"name":"Service Provider Name 1", <!--Level-3-->
                 "arrival":"12Mins",
                 "fare":"$25",
                 "minfare":"$10",
                 "riders":"8 persons"   
                },

                {"name":"Service Provider Name 2", <!--Level-3-->
                 "arrival":"8Mins",
                 "fare":"$23",
                 "minfare":"$8",
                 "riders":"12 persons"

                }]          
        },

        {"name":"Mahindra Logan", <--Level-2-->
            "servprov":[
                {"name":"Service Provider Name 3", <!--Level-3-->
                 "arrival":"5Mins",
                 "fare":"$45",
                 "minfare":"$20",
                 "riders":"14 persons"  
                },

                {"name":"Service Provider Name 4", <!--Level-3-->
                 "arrival":"2Mins",
                 "fare":"$50",
                 "minfare":"$25",
                 "riders":"10 persons"

                }]
        }, 

        {"name":"Totota Etios",  <!--Level-2-->
            "servprov":[
                {"name":"Service Provider Name 5",  <!--Level-3-->
                 "arrival":"12Mins",
                 "fare":"$25",
                 "minfare":"$10",
                 "riders":"8 persons"   
                },

                {"name":"Service Provider Name 6",  <!--Level-3-->
                 "arrival":"8Mins",
                 "fare":"$23",
                 "minfare":"$8",
                 "riders":"12 persons"

                }]  
            }]
    },

        {"name":"SUV","value":"suv",  <!--Level-1-->
        "manuf": [
        {"name":"Hyundai Creta" , <!--Level-2-->
            "servprov":[
                {"name":"Service Provider Name 1", <!--Level-3-->
                 "arrival":"12Mins",
                 "fare":"$25",
                 "minfare":"$10",
                 "riders":"8 persons"   
                }, 
        {"name":"Renault Duster" , <!--Level-2-->
            "servprov":[
                {"name":"Service Provider Name 2", <!--Level-3-->
                 "arrival":"12Mins",
                 "fare":"$25",
                 "minfare":"$10",
                 "riders":"8 persons"   
                }, 
      {"name":"Mahindra XUV"}  <!--Level-2-->
      ]},
<!--service provider details are not provided for this-->

]
<!-------------------JSON file ------------------------>

进入HTML结构后，前两个级别放在一个下拉框中，该框根据所做的选择显示。这是使用ng-options，ng-model和ng-repeat完成的。问题是，如何根据在第2级（制造商）中所做的选择以及点击“服务提供商”来获取模式弹出窗口上的3级数据（服务提供商）详细信息。按钮。身体如下图所示。

HTML结构：

<!----------------------Body--------------------------->
<section class="col-lg-4" ng-controller="CarTypes">
    <div class="bgimage2">
        <div class="form-inline">
            <select name="type" class="form-control dropdown-toggle basic" ng-options="item as item.name for item in carTypes track by item.name"
                ng-model="manufTypes">
                <option value=''>Select Type</option>
                <option ng-repeat="data in carTypes" value="{{data.value}}">{{data.name}}</option>
            </select>
        </div>

        <div class="form-inline">
            <select class="form-control basic">   
                <option value=''>Select Manufacturer</option>                            
                <option ng-repeat="subCars in manufTypes.manuf">{{subCars.name}}</option>
            </select>
        </div>
        <button type="button" ng-click="submit()" class="button1 btn btn-warning">SERVICE PROVIDER</button>
    </div>
</section>
<!----------------------Body--------------------------->

这是使用的控制器，汽车的carTypes（level-1）和制造商的manufTypes（level-2）。我应该为服务提供者使用的范围变量是什么。请帮忙。

控制器：

<!-------------------Controller------------------------>
.controller('CarTypes', function ($scope, $http) {
    $http.get('types.json').success(function (response) {
        $scope.carTypes = response;
        $scope.manufTypes = $scope.carTypes;

    })
})
<!-------------------Controller------------------------>

Answer 1

您只需在下拉列表中使用ng-options或data-ng-options即可。我在HTML中做了一些更改。

请查看此演示。

＆＃13;

＆＃13;

(function() {
  var app = angular.module("app", []);
  app.controller("controller", ["$scope",
    function($scope) {
      $scope.manufTypes = "";
      $scope.submit = function() {

        $("#myModal").modal();

      };
      $scope.carTypes = [{
        "name": "Taxi",
        "value": "taxi",
        "manuf": [{
          "name": "Tata Indica",
          "servprov": [{
            "name": "Service Provider Name 1",
            "arrival": "12Mins",
            "fare": "$25",
            "minfare": "$10",
            "riders": "8 persons"
          }, {
            "name": "Service Provider Name 2",
            "arrival": "8Mins",
            "fare": "$23",
            "minfare": "$8",
            "riders": "12 persons"
          }]
        }, {
          "name": "Mahindra Logan",
          "servprov": [{
            "name": "Service Provider Name 3",
            "arrival": "5Mins",
            "fare": "$45",
            "minfare": "$20",
            "riders": "14 persons"
          }, {
            "name": "Service Provider Name 4",
            "arrival": "2Mins",
            "fare": "$50",
            "minfare": "$25",
            "riders": "10 persons"
          }]
        }, {
          "name": "Totota Etios",
          "servprov": [{
            "name": "Service Provider Name 5",
            "arrival": "12Mins",
            "fare": "$25",
            "minfare": "$10",
            "riders": "8 persons"
          }, {
            "name": "Service Provider Name 6",
            "arrival": "8Mins",
            "fare": "$23",
            "minfare": "$8",
            "riders": "12 persons"
          }]
        }]
      }, {
        "name": "SUV",
        "value": "suv",
        "manuf": [{
          "name": "HyundaiCreta",
          "servprov": [{
            "name": "ServiceProviderName1",
            "arrival": "12Mins",
            "fare": "$25",
            "minfare": "$10",
            "riders": "8persons"
          }, {
            "name": "RenaultDuster",
            "servprov": [{
              "name": "ServiceProviderName2",
              "arrival": "12Mins",
              "fare": "$25",
              "minfare": "$10",
              "riders": "8persons"
            }, {
              "name": "MahindraXUV"
            }]
          }]
        }]
      }];
      $scope.manufTypes = $scope.carTypes;
    }
  ]);
})();

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="controller">
    <div class="bgimage2">
      <div class="form-inline">
        <select name="type" class="form-control dropdown-toggle basic" data-ng-options="item as item.name for item in carTypes" ng-model="manufTypes">
        </select>
      </div>

      <div class="form-inline">
        <select class="form-control basic" data-ng-model="subCar" data-ng-options="subCars as subCars.name for subCars in manufTypes.manuf">
          <option value="">Select Manufacturer</option>
        </select>
      </div>
      <button type="button" data-ng-click="submit()" class="button1 btn btn-warning">SERVICE PROVIDER</button>
    </div>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Service Provider Data</h4>
          </div>
          <div class="modal-body">
            <p>Data:</p>
            <table border="1 " class="table-bordered">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Arrival</th>
                  <th>Fare</th>
                  <th>Min fare</th>
                  <th>Riders</th>
                </tr>
              </thead>
              <tbody>
                <tr data-ng-repeat="items in subCar.servprov">
                  <td data-ng-bind="items.name"></td>
                  <td data-ng-bind="items.arrival"></td>
                  <td data-ng-bind="items.fare"></td>
                  <td data-ng-bind="items.minfare"></td>
                  <td data-ng-bind="items.riders"></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;