AngularJS填充一個 <select>基於先前輸入的字段<select>領域

Question

我有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”。 我將如何去做呢？ 謝謝！！

Answer 1

如果我很好地理解了您的問題，則您要根據第一個中 <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>

AngularJS填充一個 <select>基於先前輸入的字段<select>領域

問題描述

1 個解決方案

解決方案1
0 2016-07-16 04:49:20

AngularJS填充一個 <select>基於先前輸入的字段<select>領域

問題描述

1 個解決方案

解決方案1 0 2016-07-16 04:49:20

解決方案1
0 2016-07-16 04:49:20