AngularJSは<select>のフィールドを前の入力に基づいて設定します<select>フィールド

2つのドロップダウンメニューは互いに依存しています。最初のものは完全に機能しますが、最初のメニューの選択に基づいて2番目のドロップダウンを作成します。私はこれまで同様の質問がされていることを知っていますが、私のデータは異なるフォーマットのようです。ここに私のコードは次のとおりです。AngularJSは<select>のフィールドを前の入力に基づいて設定します<select>フィールド

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

最初のドロップダウンが両方とも「猫」の下で、「人口」と「病気やけが」が移入されています

<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つのセクションがあります名。ファイル全体には、5つの「人口統計」セクションと1つの「疾病と傷害」セクションが含まれています。 6つのセクションはすべて、ng-optionsで使用したenumCharsというスコープ値に格納されています。いくつかのセクションには45,000を超える値がありますので、ここに投稿したくありません。私の目標は、2番目のドロップダウンに "cat"に対応する "enumName"を入力することです。たとえば、最初のドロップダウンで "Demographics"を選択すると、2番目のドロップダウンには "Gender"、 "Race"、その他のセクションの他のセクションには "cat"という "Demographics"という値が入力されます。これをどうやってやりますか？ありがとう!!

出典

2016-07-16 EricJ0114

簡単にデバッグするためにあなたの角度JSのコードを共有してください –

私はよくあなたの質問を理解している場合、あなたは第一に選択した値に基づいて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>

出典

2016-07-16 04:49:20 developer033

AngularJSは<select>のフィールドを前の入力に基づいて設定します<select>フィールド

答えて

関連する問題