Javascript 如何(1)从角度/引导下拉列表中获取选定值,以及(2)显示选定选项?
我正在尝试让Angular UI下拉菜单正常工作:Javascript 如何(1)从角度/引导下拉列表中获取选定值,以及(2)显示选定选项?,javascript,angularjs,twitter-bootstrap,drop-down-menu,Javascript,Angularjs,Twitter Bootstrap,Drop Down Menu,我正在尝试让Angular UI下拉菜单正常工作: 如何将值传递给角度函数,以便处理它 如何在用户选择后显示所选选项,而不是始终显示“请选择”: 普朗克: HTML: <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></
<!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>
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)
};
});
在HTML中,修改与下拉列表相关的代码,以向下拉列表中显示的文本添加绑定(通过
ng bind
)+单击下拉列表中的元素时执行函数(通过ng click
):
使用此功能,您可以:1.获取所单击项目的值
2.更新所选选项。对于使用引导v4.0.0-alpha.6的Angular 4,这里有一个技巧,介绍如何做到这一点: 用于引导下拉控件的HTML
<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>
$scope.selected = "Tutorial";
$scope.setTutorial = function(value) {
$scope.selected = value;
}
<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>
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;
}
}