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

时间:2016-05-18 13:25:33

标签: javascript angularjs object nested ng-options

我有一个对象:

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

我使用ng-options来选择object.name值,但是有一个单独的ng-options,我只想看到" subObject"与首先选择的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>

单独选择对象名称而不是整个对象时,是否可以获取子对象名称列表?

2 个答案:

答案 0 :(得分:0)

让我们考虑这是包含子对象的主要对象。

$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字段中选择了值,就会使用父项选定的子对象填充第二个字段

答案 1 :(得分:0)

可以通过不同方式实现预期结果。

以下示例是一个可能的解决方案,其中从第一个选择中选择对象时,我们将它们直接提供给$ 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上占优势。我假设名称是唯一的,因为您要发送给&#34; API&#34;。

过滤代码

.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