我有一个对象:
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>
单独选择对象名称而不是整个对象时,是否可以获取子对象名称列表?
答案 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