How to (1) get selected value from Angular/Bootstrap dropdown and (2) show selected choice?
Solution 1
In your HTML, modify the code related to the dropdown to add binding to the text displayed in the dropdown (via ng-bind
) + execute a function when an element in the dropdown is clicked (via ng-click
) :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown" ng-click="toggled" ng-bind='selected'>Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" ng-repeat="choice in items">
<a role="menuitem" ng-click="setTutorial(choice)" tabindex="-1" href="#">{{choice}}</a>
</li>
</ul>
</div>
Then in the javascript, add this function which is executed when an element in the dropdown is clicked:
$scope.selected = "Tutorial";
$scope.setTutorial = function(value) {
$scope.selected = value;
}
With this function, you can:
1. get the value of the item which is clicked
2. update the selected choice.
Solution 2
For Angular 4 with Bootstrap v4.0.0-alpha.6, here's a tip on how you could do this:
HTML for Bootstrap dropdown control
<div class="form-group row">
<label class="col-md-3 form-control-label">Account</label>
<div class="col-md-9">
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedValue}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let account of accounts" value="{{account._id}}" (click)="selectValue(account)"
class="dropdown-item">{{account.firstname}} {{account.lastname}}
</li>
</ul>
</div>
</div>
</div>
JS Component Code
export class UserFormComponent implements OnInit {
selectedValue: string = '-- select value --';
selectedId: string;
// On-Click Method on dropdown control
selectValue(account: Account) {
this.selectedValue = account.firstname + ' ' + account.lastname;
this.selectedId = account._id;
}
}
Angry Dan
web/software developer, .NET, C#, WPF, PHP, software trainer, English teacher, have philosophy degree, love languages, run marathons my tweets: http://www.twitter.com/edward_tanguay my runs: http://www.tanguay.info/run my code: http://www.tanguay.info/web my publications: PHP 5.3 training video (8 hours, video2brain) my projects: http://www.tanguay.info
Updated on June 27, 2022Comments
-
Angry Dan almost 2 years
I'm trying to get Angular-UI dropdown to work: http://angular-ui.github.io/bootstrap
- How do I pass the value to my Angular function so I can process it?
- How can I display the selected choice after the user selects it instead of always showing "Please Select:"
Plunker: http://plnkr.co/edit/1Vz8T4NMi39JpdSdXgFd
HTML:
<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="DropdownCtrl"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" ng-click="toggled">Please Select: <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation" ng-repeat="choice in items"> <a role="menuitem" tabindex="-1" href="#">{{choice}}</a> </li> </ul> </div> </div> </body> </html>
JavaScript:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) { $scope.items = ['one','two','three','four']; $scope.toggled = function(value) { alert('the value you chose was ' + value) }; });