根据级联下拉列表中的选定值在Angular JS中加载嵌套JSON数据到ng-modal弹出窗口

Question

I am trying to build a piece of code using Angular JS for a JSON file having three levels of nested structure. First level being the type of the car, second being the manufacturer and third, service provider. The JSON file is as follows, given file name "types.json".

JSON File:

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

Coming to the HTML structure, the first two levels are put in a drop down boxes, which appears based on the selection made. this was done using ng-options, ng-model and ng-repeat. The problem is, how can I get the level-3 data (service provider) details on a modal popup based on the selection made in level-2(Manufacturers) and on clicking the 'service Provider' button. The body is as shown below.

HTML Structure:

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

This is the controller that is used, with carTypes for cars(level-1) and manufTypes for Manufacturers (level-2). What is the scope variable that I should use for the service provider. Please do help.

Controller:

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

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

Answer 1

You only need to use ng-options or data-ng-options in the dropdowns. I've made some changes in the HTML.

Please check this demo.

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