Question

我正在使用Angular UI btn-radio指令来显示2个不同的按钮：

<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode1'">Mode1</label>
<label class="btn btn-default"  ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode2'">Mode2</label>

这很好用，但是我想引入某种验证，这样当点击其中一个按钮时，只有在验证通过时它们才会变为活动状态。例如，如果单击“模式2”，则仅当满足某些条件时，该按钮才应处于活动状态。问题是，默认情况下，每次单击都会添加active类，btn-radio指令会存储状态active。有办法解决这个问题吗？

Answer 1

您可以在plunker

中查看我的答案

我刚刚删除了＆＃34; ng-model＆＃34;，我自己的条件是添加＆＃34;活跃＆＃34;在按钮上创建了一个自定义点击，它将在切换前检查条件。

  <div class="btn-group">
    <label class="btn btn-default" ng-class="{active:mode==='Mode1'}" ng-click="activateMode('Mode1')">Mode1</label>
    <label class="btn btn-default" ng-class="{active:mode==='Mode2'}" ng-click="activateMode('Mode2')">Mode2</label>
  </div>

和activateMode函数：

 $scope.activateMode = function(modeName){
   //I don't allow to switch mode if the checkbox isn't checked.
   if($scope.changeMode){
     $scope.mode = modeName;
   }
 }

希望它有所帮助。

点击

1 个答案: