angularjs – 更新引导下拉按钮的值和角度的操作

发布时间：2020-12-17 07:38:57 所属栏目：安全来源：网络整理

导读：我有一个下拉式按钮.如果我从下拉列表中选择一个项目,主按钮的操作应该更改为项目操作和内容. 我试过一个版本,如上图所示,与控制器： div class="btn-group" button type="button" class="btn" ng-click="mainFunction()"{{buttonCaption}}/button button ty

我有一个下拉式按钮.如果我从下拉列表中选择一个项目,主按钮的操作应该更改为项目操作和内容.

我试过一个版本,如上图所示,与控制器：

<div class="btn-group">
  <button type="button" class="btn" ng-click="mainFunction()">{{buttonCaption}}</button>
  <button type="button" class="btn dropdown-toggle">
    <span class="caret"></span>
    <span class="sr-only">Split button!</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" ng-click="update('Action',func1); func1()">Action</a></li>
    <li><a href="#" ng-click="update('Another action',func2); func2()">Another action</a></li>
    <li><a href="#" ng-click="update('Something else here',func3); func3()">Something else here</a></li>
  </ul>
</div>

Plunker example

但它真的很丑陋,而且更好地使用指令,用于工作多个下拉按钮.不知怎的,指令应该将主按钮的ng点击行为更改为所选项目.喜欢这个：

<!-- button one -->
<div class="btn-group" dropdown>
  <button type="button" class="btn btn-danger">{{button1.name}}</button>
  <button type="button" class="btn btn-danger dropdown-toggle">
    <span class="caret"></span>
    <span class="sr-only">Split button!</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" ng-click="func1()">do something</a></li>
    <li><a href="#" ng-click="func2()">do anything</a></li>
  </ul>
</div>

<!-- button two -->
<div class="btn-group" dropdown>
  <button type="button" class="btn btn-primary">{{button2.name}}</button>
  <button type="button" class="btn btn-primary dropdown-toggle">
    <span class="caret"></span>
    <span class="sr-only">Split button!</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" ng-click="func1()">Action</a></li>
    <li><a href="#" ng-click="func2()">Another action</a></li>
    <li><a href="#" ng-click="func3()">Something else here</a></li>
  </ul>
</div>

有人有一个好主意还是一个例子？

完成类似事物的一种方法(如果您的行为根据上下文变化,则效果最佳)：

<div class="btn-group" dropdown>
  <button type="submit" class="btn btn-primary" ng-click="submit()">
    {{selectedAction.name}}
  </button>
  <button class="btn btn-primary dropdown-toggle">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li ng-repeat="action in actions">
      <a ng-click="setAction(action)">{{action.name}}</a>
    </li>
  </ul>
</div>

在控制器中有一组动作：

$scope.actions = [
  {id: 'action1',name: 'Action 1'},{id: 'action2',name: 'Action 2'}
];

并设置当前动作的功能：

$scope.setAction = function(action) {
  $scope.selectedAction = action;
};

然后,您将submit()视为调度程序 – 它检查selectedAction.id,并执行正确的操作或调用正确的函数.如果您需要触发该操作,因为该选项在setAction()中执行.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!