gpt4 book ai didi

javascript - 我在 Angular JS 中选择的默认选择

转载 作者:行者123 更新时间:2023-11-30 12:00:39 25 4
gpt4 key购买 nike

我正在使用 AngularJS 创建一个简单的应用程序网络。

我想在我的选择中将城市 A 的值显示为默认选项。

index.html

<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>

<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
<option style="" value=""></option>
</select>

<table>
<tr ng-repeat="item3 in data track by item3.id">
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>

</body>

</html>

这是我的脚本js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.cities = [
{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15
}, {
id: 'c02',
name: 'name2',
price: 18
}, {
id: 'c03',
name: 'name3',
price: 11
}],
subsities: [ {
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1
}, {
id: 'sub02',
name: 'nameSub2',
price: 8
}, {
id: 'sub03',
name: 'nameSub3',
price: 1
} ]
},
{
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4
} ]
},
{
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1
}]
}
]
},
{
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10
}, {
id: 'cc02',
name: 'name22',
price: 14
}, {
id: 'cc03',
name: 'name33',
price: 11
} ]
},
{
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19
}, {
id: 'ccc02',
name: 'name222',
price: 18
}, {
id: 'ccc03',
name: 'name333',
price: 10
} ]
}
];
$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
$scope.data = itemSelected.elements;
}
}

});

我需要将城市 A 显示为默认选择值,我该如何解决这个问题?

最佳答案

您可以使用 ng-init指令来初始化您的选择。此外,您还必须调用 extractSubsities() 函数来填充您的表格:

 <select ng-model="selectedCity"  ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
</select>

这是一个有效的 fiddle example

关于javascript - 我在 Angular JS 中选择的默认选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36696546/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com