我正在开发一个应用程序,在变得太深之前我想做一个测试。我有一个使用Bootstrap创建的按钮。我安装了Bootstrap角度指令。我想根据用户对该按钮的选择来更改按钮的文本。这是我的代码:
Index.html文件:
<!doctype html>
<html ng-app="SchedgMeApp">
<head>
<!--<script src="js/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="js/ui-bootstrap-custom-tpls-0.12.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
<span class="selection">{{ selectedAction.name }}</selection> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="action in actions">
<a ng-click="setAction(action)">{{ action.name }}</a>
</li>
</ul>
</div>
</div>
</body>
</html>
app.js文件:
var app = angular.module('SchedgMeApp',['ui.bootstrap']);
angular.module('SchedgMeApp').controller('DropdownCtrl', function($scope, $log){
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopProagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.actions = [
{id: 'calbert', name: 'Chris Albert'},
{id: 'mmahony', name: 'Mike Mahony'},
{id: 'ctfletcher', name: 'CT Fletcher'},
{id: 'rjohnson', name: 'Rob Johnson'}
];
$scope.setAction = function(action) {
$scope.selectedAction = action;
};
});
这样可行,但更改按钮上的文本的代码在控制器中,我更喜欢它在指令中,因为我希望能够以这种方式为我的站点中的每个下拉按钮填充数据并且具有我网站中的每个下拉按钮都以相同的方式响应。所以这是我的问题: