Angular JS-1链接到2st链接到3rd。 现在，我需要从第3个下拉列表中选择数据，以便在另一个文本区域中显示

Question

I have posted the script and the controller. From one drop down I goto the second one and from the second to third. for example amazon's website where you got categories then to electronics and then to mobile.

Now I want to take that selected mobile and put it in another textarea.

I am building a sales management project and I am new to angular JS.

<!--This is the script--!> <script>
    function CategoryCntrl($scope) {
    $scope.categories = {'Electronics': {
    'Mobile': ['Samsung S6', 'Nokia 6', 'Motorola M2', 'Oneplus 3T'],
    'EarPhones': ['House of Marley H76', 'Sennheiser S789', 'Creative T242'],
    'Mouse': ['HP HP56', 'LG L11', 'Frontech F223']
    },
    'Clothing': {
    'T-Shirt': ['Levis T-Shirt 1231', 'PEPE T P6534', 'UCB T D7678'],
    'Shirt': ['Peter Englang P5466', 'Soldado S0944'],
    'Trouser': ['Vero Moda V6767', 'Arrow A6799']
    },
    'Books': {
    'Fiction': ['Red Serpant- Knox Vermount', 'Clove- Heather Tove', 'MajinBoo- Goku Gohan'],
    'Non-Fiction': ['Wings of Fire - APJ']
    }
    };
    }
    </script>
    ----------------------------------------------------------------------- <!--This is the controller--!>
    <div ng-controller="CategoryCntrl">
    Category: 
    <select class="select form-control" id="category" ng-model="productTypes" ng-options="category for (category, productTypes) in categories">
    <option value=''>Select</option>
    </select>
    Product Type: <select class="select form-control" id="productT" ng-disabled="!productTypes" ng-model="products" ng-options="productT for (productT,product) in productTypes"><option value=''>Select</option></select>
     Product: <select class="select form-control" id="product" ng-disabled="!products || !productTypes" ng-model="product"><option value=''>Select</option> <option ng-repeat="product in products" value='{{product}}'>{{product}}</option></select>        
    </div>
    ----------------------------------------------------------------------------
    <p>To be displayed here</p>

Answer 1

i have changed some areas in your code and seems to be working now.

Angular Controller Code

var app=angular.module('categoryApp',[]);
app.controller('categoryCntrl',['$scope',function($scope){

$scope.categories = {'Electronics': {
    'Mobile': ['Samsung S6', 'Nokia 6', 'Motorola M2', 'Oneplus 3T'],
    'EarPhones': ['House of Marley H76', 'Sennheiser S789', 'Creative T242'],
    'Mouse': ['HP HP56', 'LG L11', 'Frontech F223']
    },
    'Clothing': {
    'T-Shirt': ['Levis T-Shirt 1231', 'PEPE T P6534', 'UCB T D7678'],
    'Shirt': ['Peter Englang P5466', 'Soldado S0944'],
    'Trouser': ['Vero Moda V6767', 'Arrow A6799']
    },
    'Books': {
    'Fiction': ['Red Serpant- Knox Vermount', 'Clove- Heather Tove', 'MajinBoo- Goku Gohan'],
    'Non-Fiction': ['Wings of Fire - APJ']
    }
    };
 }]);

Code for HTML template

<div ng-app="categoryApp">
<div ng-controller="categoryCntrl">
    Category: 
    <select class="select form-control" id="category" ng-model="productTypes" ng-options="category for (category, productTypes) in categories">
    <option value=''>Select</option>
    </select>
    Product Type: <select class="select form-control" id="productT" ng-disabled="!productTypes" ng-model="products" ng-options="productT for (productT,product) in productTypes"><option value=''>Select</option></select>
     Product: <select class="select form-control" id="product" ng-disabled="!products || !productTypes" ng-model="product"><option value=''>Select</option> <option ng-repeat="product in products" value='{{product}}'>{{product}}</option></select>        
    </div>

</div>