简介
目前我有一个多选框,第二个选择是通过第一个选择填充的。
第二个选项未正确打印出来。
例如,我选择product 1
,然后选择format 2
我希望看到
{"ProductSelected":{"Pname":"product 1","format":[{"Fname":"format 2","id":"2"}
但该模型正在打印链接到产品的所有格式
{"ProductSelected":{"Pname":"product 1","format":[{"Fname":"format 1","id":"1"},{"Fname":"format 2","id":"2"}]},"format":"2"}
问题
为什么要打印链接到产品的所有格式?如何修复我的代码以仅打印所选格式?
我的选择框HTML
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductSelected"
ng-options="product.Pname for product in productsandformats">
<option value="">- Please Choose -</option>
</select>
<select ng-model="formData.format"
ng-options="format.id as format.Fname for format in formData.ProductSelected.format"
ng-if="formData.ProductSelected">
<option value="">- Please Choose -</option>
</select>
</div>
</div>
我的控制器代码js
FirstModule.controller('dropDown', function ($scope) {
$scope.productsandformats = [
{
"Pname": "product 1",
"format": [
{"Fname": "format 1", "id": "1"},
{"Fname": "format 2", "id": "2"}
]
},
{
"Pname": "product 2",
"format": [
{"Fname": "format 3", "id": "3"},
{"Fname": "format 2", "id": "2"},
{"Fname": "format 4", "id": "4"},
{"Fname": "format 5", "id": "5"}
]
}];
$scope.user = {productName: $scope.productsandformats[0]};
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
答案 0 :(得分:0)
你不能直接这样做,原因是:PEN。基本上,您无法将数据源作为目标,因为您的数据将被破坏。您可以做的是制作格式的浅层副本,并使用它来制作您需要的选项:WORKING PEN
$scope.formats = {};
$scope.productsandformats.forEach(pf=>{
$scope.formats[pf.Pname] = JSON.parse(JSON.stringify(pf.format));
})