使用angularjs指令更改引导程序下拉按钮文本

时间:2015-02-19 18:50:39

标签: javascript html angularjs twitter-bootstrap

我正在开发一个应用程序,在变得太深之前我想做一个测试。我有一个使用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;
    };

});

这样可行,但更改按钮上的文本的代码在控制器中,我更喜欢它在指令中,因为我希望能够以这种方式为我的站点中的每个下拉按钮填充数据并且具有我网站中的每个下拉按钮都以相同的方式响应。所以这是我的问题:

  1. 如何通过角度指令执行此操作?
  2. 如何在初始加载时设置默认值? &lt; - 已解决...见评论
  3. 我怎样才能这样做,以便我拥有JS中所有按钮的数据,但是可以选择在特定按钮上使用哪些数据?我假设一个模特? &lt; - 已解决...见评论

0 个答案:

没有答案