![](/img/trans.png)
[英]Populate options into select using data based on input from another field with AngularJS
[英]AngularJS populate a <select> field based on input from previous <select> field
我有2个相互依赖的下拉菜单。 第一个可以正常工作,但是我希望第二个下拉列表根据第一个菜单中的选择进行填充。 我意识到以前曾问过类似的问题,但我的数据似乎采用了不同的格式。 这是我的代码:
<body ng-app="patientSim" ng-controller="patientCtrl">
<button style="width:20%;" ng-click="addChar()">Add Characteristic</button>
<div class="row">
<div class="col-md-3"><select ng-model="selectedCategory" ng-options="x.cat as (x.cat | underFilter) for x in (enumChars | duplicateFilter)"></select></div>
<div class="col-md-3"><select ng-model="selectedName" ng-options="x.enumName as (x.enumName | underFilter) for x in enumChars"></select></div>
<div class="col-md-3"><button ng-click="eqWeight()">Equalize Weights</button></div>
<div class="col-md-3"><button ng-click="reset()">Reset</button></div>
</div>
这是JSON的2个部分:
{
"enumID": 1,
"enumName": "Gender",
"isTree": false,
"enumAlloc": 10,
"enumVals": [
"Unknown",
"Male",
"Female",
"Transgender"
],
"enumText": null,
"cat": "Demographics"
},
{
"enumID": 2,
"enumName": "Race",
"isTree": false,
"enumAlloc": 15,
"enumVals": [
"Unknown",
"American Indian/Alaska Native",
"Asian",
"Black",
"Native Hawaiian/Other Pacific Islander",
"White/Caucasian",
"Other"
],
"enumText": null,
"cat": "Demographics"
},
第一个下拉列表中均以“ cat”名称填充“ Demographics”和“ Diseases and Injuries”。 整个文件包含5个“受众特征”部分和1个“疾病和伤害”部分。 所有6个部分均存储在名为enumChars的作用域值中,我在ng-options中使用了该值。 有些部分的值超过45,000,所以我不想在这里发布它们。 我的目标是在第二个下拉列表中填充与“ cat”相对应的“ enumName”。 因此,例如,如果我在第一个下拉列表中选择“ Demographics”,则第二个下拉列表将填充“ Gender”,“ Race”以及其他部分中的其他enumName值,这些值也包含“ cat”:“ Demographics”。 我将如何去做呢? 谢谢!!
如果我很好地理解了您的问题,则您要根据第一个中 <select>
的值,使用enumVals
填充第二个 <select>
。 <select>
。
然后,如果我是正确的,则可以执行以下操作:
(function() { "use strict"; angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.enumChars = [ { "enumID":1, "enumName":"Gender", "isTree":false, "enumAlloc":10, "enumVals":[ "Unknown", "Male", "Female", "Transgender" ], "enumText":null, "cat":"Any category" }, { "enumID":2, "enumName":"Race", "isTree":false, "enumAlloc":15, "enumVals":[ "Unknown", "American Indian/Alaska Native", "Asian", "Black", "Native Hawaiian/Other Pacific Islander", "White/Caucasian", "Other" ], "enumText":null, "cat":"Demographics" } ]; }); })();
<html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script> </head> <body ng-controller="mainCtrl"> <button style="width:20%;" ng-click="addChar()">Add Characteristic</button> <div class="row"> <div class="col-md-3"> <select ng-model="selectedCategory" ng-options="obj as obj.cat for obj in enumChars"></select> </div> <div class="col-md-3" ng-if="selectedCategory"> <select ng-model="selectedName" ng-options="enum for enum in selectedCategory.enumVals"></select> </div> <div class="col-md-3"> <button ng-click="eqWeight()">Equalize Weights</button> </div> <div class="col-md-3"> <button ng-click="reset()">Reset</button> </div> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.