我查看了之前关于该主题的问题,但找不到类似这样的问题。
我的问题是,我想制作第二个 HTML 单选按钮数组,这取决于第一个选中的哪个单选按钮。假设对象数组是这样出现的:
"Names":[{
"name": "Fido",
"id": "1",
"type": [
{
"typeName": "Dog",
"typeId": "1"
},
{
"typeName": "Cat",
"typeId": "2"
},
{
"typeName": "Mouse",
"typeId": "3"
}
]
},
{
"name": "Bella",
"id": "2",
"type": [
{
"typeName": "Cat",
"typeId": "2"
},
{
"typeName": "Mouse",
"typeId": "3"
}
]
}]
我的 AngularJS 代码目前看起来像这样:
<label ng-repeat="item in nameList.Names">
<input type="radio" name="Name" ng-model="$parent.selectedName"
ng-value="item"> {{item.name}} </input>
<label ng-repeat="item in nameList.Names[$parent.selectedName.id].type"> <input
type="radio" name="Type" ng-model="$parent.selectedType"
ng-value="type"> {{item.typeName}}</input>
</label>
</label>
由于 $parent.selectedName.id 部分,我很确定这不起作用 - ng-repeat 已经创建了一个子作用域,所以这将是原始作用域的“孙子”,这意味着 $parent 是仅引用上面的脚本而不是其余代码。
有没有办法解决这个问题,这样我就可以得到一个根据第一个选定值更改选项的列表?
编辑:我真正想做的是我希望能够选择一个单选按钮(在本例中为“Fido”或“Bella”),并根据选择在第二个单选按钮列表。有没有办法使这项工作或我需要拆分“名称”对象?
最佳答案
您应该在 ng-repeat 之外显示 optional ,并将所选项目设置为其他范围值。请参阅此代码段。
注意:出于某种原因,单选按钮 ng-model 不能设置在范围变量上,但需要是对象的属性。不知道为什么。
angular
.module('someApp', [])
.controller('someController', function($scope){
$scope.name = {
selected: null
};
$scope.nameList = {
Names: [{
name: 'Foo',
type: [
{ typeName: 'ready' },
{ typeName: 'steady' }
]
},{
name: 'Bar',
type: [
{ typeName: 'start' },
{ typeName: 'stop' }
]
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="someApp">
<div ng-controller="someController">
<div ng-repeat="item in nameList.Names">
<label>
<input type="radio" name="Name" ng-model="name.selected"
ng-value="item" />{{item.name}}
</label>
</div>
<label ng-repeat="type in name.selected.type">
<input
type="radio" name="Type" ng-model="$parent.selectedType"
ng-value="type" />{{type.typeName}}
</label>
</div>
</div>
关于javascript - 使用 Angular 重复嵌套对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31532395/