Question

我有以下btn-group

<div class="btn-group">
      <label class="btn btn-success active" data-ng-model="myModel" uib-btn-radio="'enabled'"  data-ng-click="vm.myFunction()">
           Enabled
       </label>
       <label class="btn btn-success" data-ng-model="myModel" uib-btn-radio="'disabled'" data-ng-click="vm.myFunction()">
            Disabled
        </label>
 </div>

当页面被删除时，angular会添加两个类ng-pristine和ng-untouched，并从第一个单选按钮中删除class active，如下所示。

<label class="btn btn-success ng-pristine ng-untouched ng-valid waves-effect" data-ng-model="vm.statusFilter" uib-btn-radio="'enabled'" data-ng-click="vm.filterGridByStatus()">
    Enabled
</label>

Answer 1

让指令处理活动状态。在控制器中，将活动按钮分配给模型。

$scope.myModel = 'enabled';

http://codepen.io/tsneville/pen/aNWoNd

Answer 2

您可以使用ng-class进行选择。

HTML ...

<div class="btn-group btn-group-TopSubform">
                <label ng-class="buttonSelectedInButtonGrp" ng-model="radioModel" uib-btn-radio="'Left'">Primary Location1</label>
                <label class="btn btn-lg btn-success" ng-model="radioModel" uib-btn-radio="'Middle'">Other Locations</label>
            </div>

角度控制器（或可以转换为指令）......

$scope.buttonSelectedInButtonGrp = "btn btn-lg btn-success ng-untouched ng-valid ng-dirty active ng-not-empty ng-valid-parse";

请注意，这与未选择的班级列表不同，后者是...... btn btn-lg btn-success ng-pristine ng-untouched ng-valid ng-empty

css可以编辑为......

.btn-success.active {
        border-color:darkblue;
        border-width:medium;
}

.btn-success {
    border-color:none;
    border-width:medium;

}

预选uib-btn-radio按钮

2 个答案: