Question

我有两个相互依赖的下拉菜单。第一个工作完美，但我希望第二个下拉列表根据第一个菜单中的选项填充。我意识到之前已经提出过类似的问题，但我的数据似乎有不同的格式。这是我的代码：

<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的两个部分：

 {
        "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"
    },

第一个下拉列表中包含＆＃34;人口统计数据＆＃34; ＆＃34;疾病和伤害＆＃34;，都在＆＃34; cat＆＃34;名称。整个文件包含5＆＃34;人口统计数据＆＃34;部分和1＆＃34;疾病和伤害＆＃34;部分。所有6个部分都存储在一个名为enumChars的范围值中，我在ng-options中使用了它。某些部分有超过45,000个值，所以我不想在这里发布它们。我的目标是第二次下拉列表填充＆＃34; enumName＆＃34;对应于＆＃34; cat＆＃34;。例如，如果我选择＆＃34;人口统计数据＆＃34;在第一个下拉列表中，第二个下拉列表将包含＆＃34; Gender＆＃34;，＆＃34; Race＆＃34;以及其他部分中的其他enumName值，其中包含＆＃34; cat＆＃34;：＆＃34;人口统计学＆＃34 ;.我该怎么做呢？谢谢！

Answer 1

如果我理解了您的问题，您希望根据第一个中选择的值，使用enumVals 第二 <select>填充。 <select>。

然后，如果我更正，您可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

AngularJS根据前一个</select>字段的输入填充<select>字段

1 个答案: