AngularJS如何一次只切换一个按钮

时间:2018-01-22 02:14:24

标签: angularjs

我的代码:

<div class="column padding-right-8">
  <button class="btn btn-block btn-long"
          ng-click="swapsCtrl.filters.showLongs = !swapsCtrl.filters.showLongs; swapsCtrl.applyFilters()"
          ng-class="{ 'btn-disabled': !swapsCtrl.filters.showLongs }">Long</button>
</div>
<div class="column padding-left-8">
  <button class="btn btn-block btn-short"
          ng-click="swapsCtrl.filters.showShorts = !swapsCtrl.filters.showShorts; swapsCtrl.applyFilters()"
          ng-class="{ 'btn-disabled': !swapsCtrl.filters.showShorts }">Short</button>
</div>

以上代码效果很好,但它允许用户选择这两个按钮。我的预期行为:

如果选择.btn-long,则.btn-short将获取类.btn-disabled。 如果选择了.btn-short,则.btn-long将获取.btn-disabled类。

两个按钮都不可能具有类.btn-disabled,两个按钮也不可能没有.btn-disabled类。

1 个答案:

答案 0 :(得分:0)

我希望这是你想要的,但是对于 description ,在这个示例中,我尝试使用简单的模型,我们使用scope.long在两个按钮之间切换,如果{{1所以短按钮是long=true,否则长按钮是disabled

disabled
var app = angular.module("app", []);
app.controller("ctrl", function($scope){
  $scope.long = null;
  $scope.effect = function(type){
    $scope.long = type ? false : true
  }
})