Angular JS-第一个下拉列表链接到第二个链接到第三个。现在我需要从第三个下拉列表中选择数据以显示在另一个文本区域中

Question

我已经发布了脚本和控制器。我从一个下拉到第二个，从第二个到第三个。例如亚马逊的网站，在那里你有类别，然后是电子产品，然后是手机。

现在我想把那个选定的手机放在另一个文本区域。

我正在构建一个销售管理项目，我是 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

我已经更改了您代码中的一些区域，现在似乎可以正常工作了。

Angular 控制器代码

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

HTML 模板的代码

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

Angular JS-第一个下拉列表链接到第二个链接到第三个。现在我需要从第三个下拉列表中选择数据以显示在另一个文本区域中

Angular JS- 1st Dropdown linked to 2nd linked to 3rd. Now I need selected data from 3rd drop down to display in another textarea

html

javascript

angularjs

angular-ui-bootstrap