我目前在我的 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>
uj5u.com熱心網友回復：
您正在尋找的功能可以在 HTML 標簽中找到
<select>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
uj5u.com熱心網友回復：
Bootstrap 只是一個樣式庫（帶有一些 JavaScript 但僅用于互動）該模板展示了如何創建下拉串列，但對于邏輯部分，您必須將其與前端框架集成。
在原生 JavaScript 中，您可以在檢測到點擊時直接更新文本。使用 Angular，我想可以使它具有反應性。您應該能夠創建一個動態狀態，該狀態反映在按鈕文本中，并在單擊串列時更新。
我不是 Angular 專家，所以我會讓專家在這一點上回答你
uj5u.com熱心網友回復：
有時您可能想<select>用dropdown. 這是使用 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/[email protected]/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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/388453.html
標籤：html css 有角的 angularjs bootstrap-4
上一篇：直接鏈接到CSS選項卡