在选择特定的下拉菜单项时，下拉按钮值不会更改

Question

我目前在Angular项目中使用bootstrap v4.5，每当我单击下拉按钮时，无论我单击的下拉菜单项是什么，它的值都保持不变。我希望我的下拉按钮的文本更改为我正在单击的任何下拉菜单项。有人能帮我吗。

我的HTML代码：

---

<div class="dropdown">
<button class="btn btn-light dropdown-toggle mx-5 w-75 d-flex justify-content-between align-items-center" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
2021
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item">2011</a>
<a class="dropdown-item">2012</a>
<a class="dropdown-item">2013</a>
<a class="dropdown-item">2014</a>
</div>
</div>

---

Answer 1

您正在寻找的功能可以在HTML标签中找到

<select>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>

Answer 2

Bootstrap只是一个样式库(带有一些JavaScript，但仅用于交互(这个模板展示了如何创建下拉列表，但对于逻辑部分，您必须将其与前端框架集成。

在原生JavaScript中，当您检测到点击时，将由您直接更新文本。有了Angular，我想有可能让它成为被动的。您应该能够创建一个动态状态，该状态反映在按钮文本中，并在单击列表时更新。

我不是Angular专家，所以我会让专家回答你关于的问题

Answer 3

有时您可能希望用dropdown模拟<select>元素。以下是如何使用angularJS实现这一点。

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.years = [];
let y = 2010,
thisyear = new Date().getFullYear();
while (++y <= thisyear) $scope.years.push(y);
$scope.chosenYear = thisyear;
$scope.chooseYear = function(y) {
$scope.chosenYear = y;
}
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div ng-app="myApp" ng-controller="myController">
<div class="dropdown">
<button class="btn btn-light dropdown-toggle mx-5 w-75 d-flex justify-content-between align-items-center" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{chosenYear}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" ng-repeat='year in years' href="#" ng-click='chooseYear(year)'>{{year}}</a>
</div>
</div>
</div>