Fatal编程技术网
  • javascript/
  • Javascript 更改引导下拉按钮'；使用angular.js指令删除文本

Javascript 更改引导下拉按钮'；使用angular.js指令删除文本

javascript html angularjs twitter-bootstrap

Javascript 更改引导下拉按钮'；使用angular.js指令删除文本,javascript,html,angularjs,twitter-bootstrap,Javascript,Html,Angularjs,Twitter Bootstrap,我正在开发一个应用程序，在深入研究之前，我想做一个测试。我有一个使用引导创建的按钮。我已经安装了引导程序。我想根据用户对按钮的选择来更改按钮的文本。这是我的密码： Index.html文件： <!doctype html> <html ng-app="SchedgMeApp"> <head> <!--<script src="js/angular.min.js"></script>--> <scri

我正在开发一个应用程序，在深入研究之前，我想做一个测试。我有一个使用引导创建的按钮。我已经安装了引导程序。我想根据用户对按钮的选择来更改按钮的文本。这是我的密码：

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>
这是可行的，但更改按钮上文本的代码在控制器中，我更希望它在指令中，因为我希望能够以这种方式填充站点中每个下拉按钮的数据，并让站点中的每个下拉按钮以相同的方式响应。下面是我的问题：

  • 如何通过角度指令来实现这一点
  • 如何在初始加载时设置默认值我通过将$scope.selectedAction设置为setAction函数外部的JSON字符串来设置默认值。这样，页面加载时会显示一些内容。我还解决了如何获取数据的问题。为此，我为每个包含数据的下拉列表使用了一个变量。另一个问题仍然适用 
    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;
    };

});