Angular.js 从对象对象中的先前 ng-options 选择中获取 ng-options 列表答案

【问题标题】：Angular.js getting ng-options list from previous ng-options selection in object of objectsAngular.js 从对象对象中的先前 ng-options 选择中获取 ng-options 列表
【发布时间】：2016-05-18 13:25:32
【问题描述】：

我有一个对象：

object: {
    "id":"1",
    "name":"name1",
    "number":"number1",
    ...,
    "subObject":[{
        "id":"1",
        "name":"subName1"},
        {
        "id":"2",
        "name":"subName2"}
    ]};

我正在使用 ng-options 选择 object.name 值，但有一个单独的 ng-options，我只想查看与首先选择的 object.name 值关联的名称的“子对象”列表。这个 Object[object] 显然比上面的例子更复杂，但这就是结构的要点。

目前，要获得我拥有的 object.name 值的值：

<label>Object Name</label>
<select ng-options="object.name as object.name for object in Parent.objects track by object.name" ng-model="mainName" ng-value="Parent.thisState.objects.name"></select>

如果只选择对象的名称而不是先选择整个对象，是否可以获得子对象的名称列表？

【问题讨论】：

标签： javascript angularjs object nested ng-options

【解决方案1】：

让我们认为这是包含子对象的主对象。

$scope.objects = [{
  id: 1,
  name: 'object one',
  subitems: [{
    id: 1,
    name: 'subitem one of obj 1'
  }, {
    id: 2,
    name: 'subitem two of obj 1'
  }, {
    id: 3,
    name: 'subitem three of obj 1'
  }]
}, {
  id: 2,
  name: 'object two',
  subitems: [{
    id: 1,
    name: 'subitem one of obj 2'
  }, {
    id: 2,
    name: 'subitem two of obj 2'
  }, {
    id: 3,
    name: 'subitem three of obj 2'
  }]
}, {
  id: 3,
  name: 'object three',
  subitems: [{
    id: 1,
    name: 'subitem one of obj 3'
  }, {
    id: 2,
    name: 'subitem two of obj 3'
  }, {
    id: 3,
    name: 'subitem three of obj 3'
  }]
}];

这将是您的 html，

  <select ng-model="s1" ng-options="obj as obj.name for obj in objects"></select>

<select ng-model="s2" ng-options="subobj.name as subobj.name for subobj in s1.subitems" ng-disabled="!s1"></select>

默认情况下，子对象选择字段将被禁用（因为它没有任何父值）。一旦您在 mainObject seclect 字段中选择了值，第二个字段就会填充父母选择的子对象

【讨论】：

不幸的是，这会将第一个值作为整个对象返回，而不仅仅是名称。我需要的值仅仅是对象的名称。这使得子项未定义。

【解决方案2】：

可以通过不同的方式达到预期的结果。

以下示例是一个可能的解决方案，在从第一个选择中选择对象时，我们将它们直接提供给第二个选择使用的 $scope 变量。

标记

<body ng-app="myApp" ng-controller="myController">
    <select ng-model="selectedFromList" 
    ng-options="object.subitems as object.name for object in list track by object.id"></select>
    <select ng-model="selectedFromSubList"
    ng-options="subitems as subitems.name for subitems in selectedFromList"></select>
 </body>

在第一次选择时，我们说我们要显示对象的名称as object.name，可管理的对象将是object.subitems，它将存储在ng-model ng-model="selectedFromList"中在第二次选择中，我们将遍历模型 selectedFromList 中的对象并显示 subitems.name。

工作plunker

编辑

对于您在评论中描述的问题，我建议使用过滤器，因此名称可以以第一个选择的 ng-model 为准。我假设该名称是唯一的，因为这是您要发送到“API”的名称。

过滤代码

.filter('mapArray', function() {
  return function(array, name) {  
    if (!angular.isArray(array)) return array;
    var filter = array.filter(function(value){return value.name === name.name;})[0];
    if (filter === undefined) return [];
    return filter.subitems;
  }
})

标记

<body ng-app="myApp" ng-controller="myController">
    <select ng-model="selectedFromList" 
    ng-options="object.name as object.name for object in list"></select>
    <select ng-model="selectedFromSubList"
    ng-options="subitems as subitems.name for subitems in 
(list |  mapArray:{name :selectedFromList})"></select>
  </body>

工作plunker

【讨论】：

这里发现了同样的问题。发送到 API 的第一个选择值必须是 object.name 值。因此，尽管在您使用 object.subitems as object.name 时会显示 object.name 值，但发送到 API 的值是 object.subitems 而不是 object.name。
@brettwbyron 我修改了答案。
感谢您的帮助。我决定将我的代码保持抽象，并创建一个服务函数来获取第一个对象，以及一个服务函数来获取每个父对象中每个子对象的 id。它看起来像这样：self.getObjects = function() { MyService.getObjects() .then(function(results) { self.objects = results.objects; }); self.getSubObjectsByObjectId = function(objects, id) { objects.forEach(function(obj) { if (obj.id === id) { self.sub = obj.sub; } }); };
forEach() 是我编写的一个函数，属于我在所有应用程序中使用的库文件夹。