预选uib-btn-单选按钮

Question

我有以下btn组

<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，并从第一个单选按钮中删除了活动类，如下所示。

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

Angular Controller (或者可以转换成一个指令) ...

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

请注意，这与未选择的类列表不同，后者是...btn btn-lg btn-成功ng-原始ng-未接触ng-有效ng-空

css可以编辑为...

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

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

}