AngularJs ng-options for a nested JSON with a filter condition on the parent object

Question

I have a JSON structure

$scope.table = [{ 'ContainerNo': 'EGSU9014188', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'CUSTOMS', 'BLBENo': 'NIL', 'IDOExpiry': '30-05-2015', 'Remarks': 'Not valid for any transaction', 'flag': true, 'TransList': [{ 'Values': '' }] },
            { 'ContainerNo': 'EMCU3886883', 'ISO': '2201', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'NIL', 'BLBENo': 'I/25493/2013', 'IDOExpiry': '30-05-2015', 'Remarks': 'Valid for DI', 'flag': false, 'TransList': [{ 'Values': 'DI' }] },
            { 'ContainerNo': 'CARU9997951', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'LINE', 'BLBENo': 'I/4523/2013', 'IDOExpiry': 'NIL', 'Remarks': 'Not valid for any transaction', 'flag': true, 'TransList': [{ 'Values': '' }] },
            { 'ContainerNo': 'EMCU1313835', 'ISO': '4200', 'Type': 'IMPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'NIL', 'BLBENo': 'I/245893/2013', 'IDOExpiry': '30-05-2015', 'Remarks': 'Valid for RM/RE', 'flag': false, 'TransList': [{ 'Values': 'RM' },{ 'Values': 'RE' }] },
            { 'ContainerNo': 'GESU4333339', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'LINE', 'BLBENo': 'I/305693/2013', 'IDOExpiry': '02-05-2015', 'Remarks': 'Not valid for RM,Valid for RE', 'flag': true, 'TransList': [{ 'Values': 'RE' }] },
            { 'ContainerNo': 'EGSU3024492', 'ISO': '2200', 'Type': 'EXPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for RE/RM', 'flag': false, 'TransList': [{ 'Values': 'RE' },{ 'Values': 'RM' }] },
            { 'ContainerNo': 'EGHU9076761', 'ISO': '4510', 'Type': 'EXPORT-FCL', 'Status': 'YARD', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Not valid for any transactions', 'flag': true, 'TransList': [{ 'Values': '' }] },
            { 'ContainerNo': 'FSCU6944115', 'ISO': '4510', 'Type': 'STORAGE-MTY', 'Status': 'YARD', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for DM', 'flag': false, 'TransList': [{ 'Values': 'DM' }] },
            { 'ContainerNo': 'CLHU8682640', 'ISO': '45G1', 'Type': 'STORAGE-MTY', 'Status': 'DEPARTED', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for RE/RM', 'flag': true, 'TransList': [{ 'Values': 'RE'},{ 'Values': 'RM' }] }

I want to display the TransList which has multiple values in a dropdown.

    <select  ng-model="transactionTypeselected" ng-options="col.TransList.Values for col in table | filter : { ContainerNo : selectedContainer.ContainerNo}" >
</select>

selectedcontainer is set in the previous dropdown

<select ng-options="col.ContainerNo for col in table | filter : IsCheckSelected " ng-model="selectedContainer">
                                            </select>

The selectedcontainer should list the TransList types , it's a cascading dropdown . Need help with

ng-options="col.TransList.Values for col in table | filter : { ContainerNo : selectedContainer.ContainerNo}

Either the JSON structure I have chosen can be changed or the ng-options condition

Answer 1

In your case selectedContainer already save all row, so you not need filter again, just get value from it like

<select ng-model="transactionTypeselected" ng-options="col.Values for col in selectedContainer.TransList">

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.table = [{ 'ContainerNo': 'EGSU9014188', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'CUSTOMS', 'BLBENo': 'NIL', 'IDOExpiry': '30-05-2015', 'Remarks': 'Not valid for any transaction', 'flag': true, 'TransList': [{ 'Values': '' }] }, { 'ContainerNo': 'EMCU3886883', 'ISO': '2201', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'NIL', 'BLBENo': 'I/25493/2013', 'IDOExpiry': '30-05-2015', 'Remarks': 'Valid for DI', 'flag': false, 'TransList': [{ 'Values': 'DI' }] }, { 'ContainerNo': 'CARU9997951', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'LINE', 'BLBENo': 'I/4523/2013', 'IDOExpiry': 'NIL', 'Remarks': 'Not valid for any transaction', 'flag': true, 'TransList': [{ 'Values': '' }] }, { 'ContainerNo': 'EMCU1313835', 'ISO': '4200', 'Type': 'IMPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'NIL', 'BLBENo': 'I/245893/2013', 'IDOExpiry': '30-05-2015', 'Remarks': 'Valid for RM/RE', 'flag': false, 'TransList': [{ 'Values': 'RM' }, { 'Values': 'RE' }] }, { 'ContainerNo': 'GESU4333339', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'LINE', 'BLBENo': 'I/305693/2013', 'IDOExpiry': '02-05-2015', 'Remarks': 'Not valid for RM,Valid for RE', 'flag': true, 'TransList': [{ 'Values': 'RE' }] }, { 'ContainerNo': 'EGSU3024492', 'ISO': '2200', 'Type': 'EXPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for RE/RM', 'flag': false, 'TransList': [{ 'Values': 'RE' }, { 'Values': 'RM' }] }, { 'ContainerNo': 'EGHU9076761', 'ISO': '4510', 'Type': 'EXPORT-FCL', 'Status': 'YARD', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Not valid for any transactions', 'flag': true, 'TransList': [{ 'Values': '' }] }, { 'ContainerNo': 'FSCU6944115', 'ISO': '4510', 'Type': 'STORAGE-MTY', 'Status': 'YARD', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for DM', 'flag': false, 'TransList': [{ 'Values': 'DM' }] }, { 'ContainerNo': 'CLHU8682640', 'ISO': '45G1', 'Type': 'STORAGE-MTY', 'Status': 'DEPARTED', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for RE/RM', 'flag': true, 'TransList': [{ 'Values': 'RE' }, { 'Values': 'RM' }] }]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <select ng-options="col.ContainerNo for col in table | filter : IsCheckSelected " ng-model="selectedContainer"> </select> <select ng-model="transactionTypeselected" ng-options="col.Values for col in selectedContainer.TransList"> </select> </div> 

UPDATE for sample in comment.
After filtering table you whatever get array of row from table, not single row. So you can't get collection TransList directly, but you can write simple filter that return array selected fields, something like this:

.filter('mapArray', function() {
  return function(array, field) {
    if (!angular.isArray(array)) return array;

    return array.reduce(function(acc,el){
      return acc.concat(el[field.field]);
      },[])
  }
})

and use it like

<select ng-model="transactionTypeselected" ng-options="col.Values for col in (table | filter : { ContainerNo : selectedContainer.ContainerNo} | mapArray:{field :'TransList'})">
</select>

 angular.module('app', []) .filter('mapArray', function() { return function(array, field) { if (!angular.isArray(array)) return array; return array.reduce(function(acc,el){ return acc.concat(el[field.field]); },[]) } }) .controller('ctrl', function($scope) { $scope.table = [{ 'ContainerNo': 'EGSU9014188', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'CUSTOMS', 'BLBENo': 'NIL', 'IDOExpiry': '30-05-2015', 'Remarks': 'Not valid for any transaction', 'flag': true, 'TransList': [{ 'Values': '' }] }, { 'ContainerNo': 'EMCU3886883', 'ISO': '2201', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'NIL', 'BLBENo': 'I/25493/2013', 'IDOExpiry': '30-05-2015', 'Remarks': 'Valid for DI', 'flag': false, 'TransList': [{ 'Values': 'DI' }] }, { 'ContainerNo': 'CARU9997951', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'YARD', 'Hold': 'LINE', 'BLBENo': 'I/4523/2013', 'IDOExpiry': 'NIL', 'Remarks': 'Not valid for any transaction', 'flag': true, 'TransList': [{ 'Values': '' }] }, { 'ContainerNo': 'EMCU1313835', 'ISO': '4200', 'Type': 'IMPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'NIL', 'BLBENo': 'I/245893/2013', 'IDOExpiry': '30-05-2015', 'Remarks': 'Valid for RM/RE', 'flag': false, 'TransList': [{ 'Values': 'RM' }, { 'Values': 'RE' }] }, { 'ContainerNo': 'GESU4333339', 'ISO': '4510', 'Type': 'IMPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'LINE', 'BLBENo': 'I/305693/2013', 'IDOExpiry': '02-05-2015', 'Remarks': 'Not valid for RM,Valid for RE', 'flag': true, 'TransList': [{ 'Values': 'RE' }] }, { 'ContainerNo': 'EGSU3024492', 'ISO': '2200', 'Type': 'EXPORT-FCL', 'Status': 'DEPARTED', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for RE/RM', 'flag': false, 'TransList': [{ 'Values': 'RE' }, { 'Values': 'RM' }] }, { 'ContainerNo': 'EGHU9076761', 'ISO': '4510', 'Type': 'EXPORT-FCL', 'Status': 'YARD', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Not valid for any transactions', 'flag': true, 'TransList': [{ 'Values': '' }] }, { 'ContainerNo': 'FSCU6944115', 'ISO': '4510', 'Type': 'STORAGE-MTY', 'Status': 'YARD', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for DM', 'flag': false, 'TransList': [{ 'Values': 'DM' }] }, { 'ContainerNo': 'CLHU8682640', 'ISO': '45G1', 'Type': 'STORAGE-MTY', 'Status': 'DEPARTED', 'Hold': 'N/A', 'BLBENo': 'N/A', 'IDOExpiry': 'N/A', 'Remarks': 'Valid for RE/RM', 'flag': true, 'TransList': [{ 'Values': 'RE' }, { 'Values': 'RM' }] }]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <select ng-options="col.ContainerNo for col in table | filter : IsCheckSelected " ng-model="selectedContainer"> </select> <select ng-model="transactionTypeselected" ng-options="col.Values for col in (table | filter : { ContainerNo : selectedContainer.ContainerNo} | mapArray:{field :'TransList'})"> </select> </div>