根據級聯下拉列表中的選定值在Angular JS中加載嵌套JSON數據到ng-modal彈出窗口

Question

我正在嘗試使用Angular JS為具有三個嵌套結構級別的JSON文件構建一段代碼。 第一層是汽車的類型，第二層是制造商，第三層是服務提供商。 給定文件名“ types.json”，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（級別1）和用於制造商的manufTypes（級別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進行了一些更改。

請檢查此演示。

 (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; } ]); })(); 

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