Actualmente estoy usando bootstrap v4.5 en mi proyecto Angular y cada vez que hago clic en mi botón desplegable, su valor sigue siendo el mismo independientemente del elemento del menú desplegable en el que esté haciendo clic. Quiero que el texto de mi botón desplegable cambie a cualquier elemento del menú desplegable en el que esté haciendo clic. ¿Puede alguien ayudarme con esto?
Mi código 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>La funcionalidad que está buscando se puede encontrar en la etiqueta HTML
<select> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select>Bootstrap es solo una biblioteca de estilos (con algo de JavaScript pero solo para interacciones). Esta plantilla muestra cómo crear un menú desplegable, pero para la parte lógica, deberá integrarlo con su marco de interfaz.
En JavaScript nativo, depende de usted actualizar el texto directamente cuando detecte un clic. Con Angular, supongo que es posible hacerlo reactivo. Debería poder crear un estado dinámico, que se refleja en el texto del botón y que actualiza cuando se hace clic en la lista.
No soy especialista en Angular, así que dejaré que los expertos te respondan sobre este punto
Puede haber ocasiones en las que desee emular un elemento <select> con un dropdown . Así es como puede lograrlo con 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>