Question

将HTML视为

<div class="btn-group col-lg-3" data-toggle="buttons" data-ng-model="transaction.debit" required>
    <label class="btn btn-default" data-ng-click="setDebitTransaction('true')">
      <input type="radio">Debit
    </label>
    <label class="btn btn-default" data-ng-click="setDebitTransaction('false')">
      <input type="radio">Credit
    </label>

<div>

我的Controller看起来像

$scope.transaction = {};
  $scope.setDebitTransaction = function(value) {
    $scope.transaction.debit = value;
    console.log('Debit = ', $scope.transaction.debit);
  };

我想要什么？
- 当我点击单选按钮时，我看到$scope.transaction.debit已正确设置，并且相应的单选按钮已启用 - 但是当我的模型从后端处理中更改其值时，我发现$scope.transaction.debit已正确设置但未启用相应的无线电元素

问题 - 如何根据$scope.transaction.debit？

中的值启用单选按钮

DEMO

我把它放在plunker

上

Answer 1

在标签上通过active设置ng-class课程，如下所示：

<label class="btn btn-default" ng-class="{active: transaction.debit}" data-ng-click="setDebitTransaction('true')">
      <input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{active: !transaction.debit}" data-ng-click="setDebitTransaction('false')">
      <input type="radio">Credit
</label>

此处的Plunker：http://plnkr.co/edit/tUzF4J9ixEnKxLNdI1Bm

Answer 2

我假设您要做的是获取btn-group中的相应按钮，将其状态更改为＆＃34; active＆＃34; （引导样式类）。要做到这一点，可能有一百万种方法，这里有一种：

在angular中使用ng-class指令，根据某些$scope属性（在您的情况下为$scope.transaction.debit）将类注入btn div。

以下是代码的外观：

<label class="btn btn-default" ng-class="{'active': transaction.debit}" data-ng-click="setDebitTransaction('true')">
  <input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{'active': !transaction.debit}" data-ng-click="setDebitTransaction('false')">
  <input type="radio">Credit
</label>

更新了plunker。

AngularJS：如何在模型更改时更改单选按钮视图？

2 个答案: