单击时验证 btn 单选按钮答案

【问题标题】：Validate btn-radio button on click单击时验证 btn 单选按钮
【发布时间】：2015-10-09 08:34:02
【问题描述】：

我正在使用 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。有没有办法解决这个问题？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

你可以在这个plunker看我的回答

我刚刚删除了“ng-model”，创建了自己的条件以在按钮上添加“活动”，并创建了一个自定义点击，将在切换前检查条件。

  <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;
   }
 }

希望对您有所帮助。

【讨论】：

@Zed，你试过我的解决方案了吗？