AngularJS - 入れ子になった配列からの2つのドロップダウン

ここでは、サービスから取得したオブジェクトの簡略化されたバージョンを示します。AngularJS - 入れ子になった配列からの2つのドロップダウン

[ 
    { 
    "lookupID": "Annual Leave", 
    "lookupCode": "Annual Leave", 
    "reasonRecords": [ 
     { 
     "reason": "Annual", 
     "docRequired": "N" 
     }, 
     { 
     "reason": "Mandatory", 
     "docRequired": "N" 
     } 
    ] 
    }, 
    { 
    "lookupID": "Accumulated Leave", 
    "lookupCode": "Accumulated Leave", 
    "reasonRecords": [ 
     { 
     "reason": "Accumulative", 
     "docRequired": "N" 
     }, 
     { 
     "reason": "Cancellation", 
     "docRequired": "Y" 
     } 
    ] 
    }, 
    { 
    "lookupID": "Study Leave", 
    "lookupCode": "Study Leave", 
    "reasonRecords": [ 
     { 
     "reason": "Examination Leave", 
     "docRequired": "N" 
     }, 
     { 
     "reason": "Research Leave", 
     "docRequired": "N" 
     } 
    ] 
    } 
]

は、私が最初にはすでに人口と労働、それが表示され、この

ようになるはずです（x回繰り返すことができる）2 dopdowns

最終結果を移入する必要がありますすべての可能なLookupIDの

<select class="form-control" id="leavetype_{{$index}}" ng-model="leaveEntry.leaveTypeKey" value="leaveEntry.leaveTypeKey" ng-required> 
    <option ng-repeat="leaveType in leaveTypes" value="{{leaveType.lookupCode}}">{{leaveType.lookupCode}}</option> 
</select>

2番目のドロップダウンには、 nは、前のドロップダウン

で選択lookupCode現在ちょうど最初lookupCode私が動的に2番目のドロップダウンを移入するにはどうすればよい

<select class="form-control" id="reason_{{$index}}" ng-model="leaveEntry.reason" value="leaveEntry.reason" ng-required> 
    <option ng-repeat="reasonRecord in leaveTypes[0].reasonRecords" value="{{reasonRecord.reason}}" >{{reasonRecord.reason}}</option> 
</select>

の原因を示すために、ハードコードされますか？

ボーナス：フィールドは、あなたがしなければならないどのような選択に

出典

2017-04-03 LegionDev

可能重複http://stackoverflow.com/questions/41935602/angularjs-ng-options -nested-json-data） – Mistalis

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
 
<html> 
 
<head> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('ctrl', ['$scope', function($scope) { 
 
    
 
    $scope.selectData = [ 
 
    { 
 
    "lookupID": "Annual Leave", 
 
    "lookupCode": "Annual Leave", 
 
    "reasonRecords": [ 
 
     { 
 
     "reason": "Annual", 
 
     "docRequired": "N" 
 
     }, 
 
     { 
 
     "reason": "Mandatory", 
 
     "docRequired": "N" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "lookupID": "Accumulated Leave", 
 
    "lookupCode": "Accumulated Leave", 
 
    "reasonRecords": [ 
 
     { 
 
     "reason": "Accumulative", 
 
     "docRequired": "N" 
 
     }, 
 
     { 
 
     "reason": "Cancellation", 
 
     "docRequired": "Y" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "lookupID": "Study Leave", 
 
    "lookupCode": "Study Leave", 
 
    "reasonRecords": [ 
 
     { 
 
     "reason": "Examination Leave", 
 
     "docRequired": "N" 
 
     }, 
 
     { 
 
     "reason": "Research Leave", 
 
     "docRequired": "N" 
 
     } 
 
    ] 
 
    } 
 
] 
 
}]); 
 
</script> 
 
</head> 
 
<body ng-app="myApp"> 
 
<div ng-controller="ctrl"> 
 
<select ng-options="data as data.lookupCode for data in selectData" ng-model="lookupCodeselected"> </select> 
 
<select ng-disabled="!lookupCodeselected" ng-options="data as data.reason for data in lookupCodeselected.reasonRecords" ng-model="selected2"></select> 
 
</div> 
 
</body> 
 
</html>

[JSONデータをネストangularjs NG-オプション（の

出典

2017-04-03 13:58:40

を基づいて、適切なdocRequired値を表示する必要がある、あなたの最初の選択でオブジェクト全体を選択しています。 2番目の選択に、選択したオブジェクトの子を移入します。

<select ng-options="n as n.lookupCode for n in data" ng-model="selected">  
    </select> 
    <select ng-options="n as n.reason for n in selected.reasonRecords" ng-model="selected2">  
    </select>

http://jsfiddle.net/hLhtbxb8/

出典

2017-04-03 13:39:59 yBrodsky

AngularJS - 入れ子になった配列からの2つのドロップダウン

答えて

関連する問題