gpt4 book ai didi

javascript - 可靠的 Angular 下拉菜单

转载 作者:行者123 更新时间:2023-12-03 11:15:09 25 4
gpt4 key购买 nike

我正在尝试使用 Angular 创建可靠的下拉菜单。经过大量调试时间后,我发现我的问题是 Angular 版本。因此,Angular 的最新版本在我的下拉列表中生成了一个新的奇怪选项,如下所示 <option value="? string:October ?"></option> 。因此,经过几次战斗,我发现它可以与 Angular 1.2.27 配合使用。我更喜欢让它在新版本的 Angular 中也能发挥作用。

是否有其他方法可以使其在最新版本中发挥作用?

这是我的代码:

<!DOCTYPE html>
<html ng-app="supervisor">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script type="text/javascript" language="JavaScript">
angular.module('supervisor', [])
.controller('testCtrl', ["$scope", function ($scope) {
$scope.loanYears = {"2014": ["October", "September"], "2015": ["November", "December"]};
}]);
</script>
</head>
<body>
<div class="row clearfix" ng-controller="testCtrl">
<form id="target">
<select ng-model="months" id="year" name="yearRequired"
ng-options="year for (year, months) in loanYears">
<option value="">Select</option>
</select>

<select ng-model="month" ng-disabled="!months" id="month" name="monthRequired"
ng-options="month as month for month in months">
<option value="">Select</option>
</select>
</form>
</div>

</body>
</html>

因此,要获得不良行为,请参阅:http://plnkr.co/edit/aTwXhg5W8RHml9FpDX78?p=preview然后选择2014->September->2015->出现注入(inject)了奇怪的空白选项。

谢谢!

最佳答案

由于未选择有效选项,因此 Angular 添加了空选项。要消除此问题,请预先选择一个值。

示例(将以下内容添加到您的 Controller 并重试)

$scope.months = $scope.loanYears["2014"]
$scope.month = $scope.loanYears["2014"][0]

可能更好的方法是预先选择 ng-change 的月份

http://plnkr.co/edit/jeC7hEjnuvneoq0GR7xm?p=preview

Controller :

$scope.setMonths = function(months) {
if(months && months.length > 0) {
$scope.month = months[0]
}
}

在你的html中:

<select ng-model="months" id="year" name="yearRequired"
ng-change="setMonths(months)"
ng-options="year for (year, months) in loanYears">

关于javascript - 可靠的 Angular 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27377704/

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