我创建了2个选择框,我从json文件中获取数据,并且工作正常,唯一的问题是在我的第二个选择框中,如果我开始选择任何选项,选择中的选项开始复制相同的选项ir删除,搞得一团糟。
这是我的代码: JSON:
[
{
"_id": "1",
"label": "Category 1",
"childs": [
"subtitle_1 from Category_1",
"subtitle_2 from Category_1",
"subtitle_3 from Category_1",
"subtitle_4 from Category_1",
"subtitle_5 from Category_1",
"subtitle_6 from Category_1"
]
},
{
"_id": "2",
"label": "Category 2",
"childs": [
"subtitle_1 from Category_2",
"subtitle_2 from Category_2",
"subtitle_3 from Category_2",
"subtitle_4 from Category_2",
"subtitle_5 from Category_2",
"subtitle_6 from Category_2"
]
}
]
JS:
<form>
<div class="form-group question-wrapper">
<label class="label-support" for="">Choose Category</label>
<!-- ng-options="option as option.label for (option, child) in SupportCtrl.options" -->
<select class="form-control"
name="category"
ng-options="option.label for option in SupportCtrl.options track by option._id"
ng-model="SupportCtrl.supportMail.selected">
</select>
</div>
<div class="form-group question-wrapper">
<label class="label-support" for="">Choose Sub Category</label>
<select id="sub" class="form-control"
name="subcategory"
ng-model="SupportCtrl.supportMail.selected.childs[0]">
<option ng-repeat="child in SupportCtrl.supportMail.selected.childs track by $index">@{{child}}</option>
</select>
</div>
</form>
答案 0 :(得分:1)
问题是选择了因为模型而在你的json中反映的值。使用正确的ng-model
你可以看看它经过测试的https://plnkr.co/edit/CUfuSDoqoqUu358ocVx3?p=preview
<div class="form-group question-wrapper">
<label class="label-support" for="">Choose Sub Category</label>
<select id="sub" class="form-control"
name="subcategory"
ng-model="selectedoption">
<option ng-hide="!$first"></option> //this will hide first black option
<option value="{{child}}" ng-repeat="child in SupportCtrl.supportMail.selected.childs track by $index">{{child}}</option>
</select>
</div>
JSON:
$scope.SupportCtrl={
supportMail:{selected:{
"_id": "2",
"label": "Category 2",
"childs": [
"subtitle_1 from Category_2",
"subtitle_2 from Category_2",
"subtitle_3 from Category_2",
"subtitle_4 from Category_2",
"subtitle_5 from Category_2",
"subtitle_6 from Category_2"
]
}
}
}
答案 1 :(得分:0)
http://jsfiddle.net/pythondave/JUZDf/ 试试这个例子。改变json结构。我用了自己的json。工作正常
<div ng-app ng-controller="SelectController">
<select ng-model="category" ng-options="c.name for c in sampleProductCategories"></select>
<select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
</div>
JSON:
function SelectController($scope) {
// Data taken from KnockoutJs cart example
$scope.sampleProductCategories = [
{
"name": "Classic Cars",
"products": [
{
"name": "1948 Porsche 356-A Roadster",
"options":[
{"value": "Color",
"options":[
{"value": "Red"},
{"value":"Black"}
],
},
{"value":"Seats",
"options":[
{"value": "Leather"},
{"value":"Cloth"}
],
},
{"value":"Warranty",
"options":[
{"value": "2 Year"},
{"value":"3 Year"}
],
}
],
"price": 53.9
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25
}
]
},
{
"name": "Motorcycles",
"products": [
{
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23
},
{
"name": "1957 Vespa GS150",
"price": 32.95
},
{
"name": "1960 BSA Gold Star DBD34",
"price": 37.32
}
]
},
{
"name": "Planes",
"products": [
{
"name": "1900s Vintage Bi-Plane",
"price": 34.25
},
{
"name": "1900s Vintage Tri-Plane",
"price": 36.23
},
{
"name": "1928 British Royal Navy Airplane",
"price": 66.74
},
{
"name": "1980s Black Hawk Helicopter",
"price": 77.27
},
{
"name": "ATA: B757-300",
"price": 59.33
}
]
}
];
}