我在angular JS中选择的默认选项
A default choice in my select in angular JS
我正在使用AngularJS创建一个简单的应用程序web。
我想在我的选择中显示城市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>
这是一个工作小提琴的例子
您可以通过将此行添加到控制器中,在页面加载完成之前设置所选城市。
类似这样的东西:
$scope.selectedCity = $scope.cities[0].name;
只需将selectedSubCity
分配给默认值:
$scope.selectedSubCity = $scope.cities[0];
也可调用extractSubstities:
$scope.extractSubsities();
相关文章:
- 或者在表单上选择默认选项文本(选择1)
- 选择非空选项后,默认选项消失
- 使用 ajax 填充选择时没有选定的默认选项的问题
- 我在angular JS中选择的默认选项
- 将默认选项添加到ng-if
- Angular-选择不显示在下拉列表中的默认选项
- 我在angular JS中选择了一个默认选项,并删除了两个单词之间的下划线
- 使用Select2远程加载设置默认选项
- ES6 默认选项参数
- 如何声明,以便在 jquery 移动 UI 中突出显示默认选项卡
- 覆盖默认选项卡导航
- 在第一个由 angularjs 选择中排序默认选项
- 如何防止 JQuery 中的默认选项卡切换功能
- 高图表 - 添加其他导出选项而不会丢失默认选项
- 在选择下拉列表中的值时向某些控件添加了默认选项
- 显示所有选项的 ng 选项默认选项
- 使用js更改默认选项卡和页面
- 如何允许轻松覆盖javascript函数中的默认选项
- 在.js中设置默认选项卡
- 选择列表项分页内的默认选项卡