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

Question

我有一个对象：

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

我正在使用ng-options选择object.name值，但是有一个单独的ng-options，我只想查看与首先选择的object.name值关联的名称的“ subObject”列表。 显然，此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>

仅选择对象名称而不是首先选择整个对象时，是否可以获得子对象名称列表？

Answer 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字段中选择值后，第二个字段将填充父级的选定subObjects

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

工作塞

编辑

对于您描述为评论的问题，我建议使用过滤器，因此该名称可以优先出现在首选模型的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>

工作塞

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

问题描述

2 个解决方案

解决方案1
0 2016-05-18 14:36:13

解决方案2
0 2016-05-18 14:53:50

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

问题描述

2 个解决方案

解决方案1 0 2016-05-18 14:36:13

解决方案2 0 2016-05-18 14:53:50

解决方案1
0 2016-05-18 14:36:13

解决方案2
0 2016-05-18 14:53:50