AngularJs ng-options 用于嵌套 JSON，在父对象上具有过滤条件答案

【问题标题】：AngularJs ng-options for a nested JSON with a filter condition on the parent objectAngularJs ng-options 用于嵌套 JSON，在父对象上具有过滤条件
【发布时间】：2015-05-25 07:52:00
【问题描述】：

我有一个 JSON 结构

$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' }] }

我想在下拉列表中显示具有多个值的 TransList。

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

selectedcontainer 在上一个下拉菜单中设置

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

selectedcontainer 应该列出 TransList 类型，它是一个级联下拉列表。需要帮助

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

可以更改我选择的JSON 结构或ng-options 条件

【问题讨论】：

你能提供jsfiddle或plunker吗？您需要什么帮助？
我需要 RE RM 的值

标签： html json angularjs filter

【解决方案1】：

在您的情况下selectedContainer 已经保存了所有行，因此您不需要再次过滤，只需从中获取价值即可

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

更新评论中的示例。
在过滤 table 之后，您可以从表中获取行数组，而不是单行。所以你不能直接得到集合TransList，但是你可以编写简单的filter来返回数组选择的字段，像这样：

.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]);
      },[])
  }
})

并像使用它

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

【讨论】：

谢谢 :)，迟了一点才意识到 selectedcontainer 应该已经有了列表，但是对于深度嵌套列表有什么解决方案吗？
@RameezAhmedSayad，你能解释一下你的意思吗？您可以访问任何深度。如果您用示例更新您的问题，我可能会更新我的答案
对于我的问题，如果selectedContainer 不存在并且ng-options="col.TransList.Values for col in table | filter : { ContainerNo : 'XYZ'} 是条件，那么对于我的评论，您的答案是正确的
首先：在您的示例中 TransList 没有属性 Values，因为 TransList 是数组