AngularJS:如何在模型改变时改变单选按钮视图

AngularJS: How to change radio button view when model changes?

本文关键字：改变 单选按钮 视图 模型 AngularJS      更新时间：2023-09-26

考虑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中的值启用单选按钮?

我把这个放在了plunker

我假设你要做的是在btn-group中获得适当的按钮，将其状态更改为"active" (bootstrap样式类)。要做到这一点，可能有一百万种方法，这里有一种:

在angular中使用ng-class指令，根据$scope属性(在你的例子中是$scope.transaction.debit)向btndiv注入一个类。

在代码中可能是这样的:

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

更新砰砰作响。

在标签上通过ng-class设置active类，如下所示:

<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 here: http://plnkr.co/edit/tUzF4J9ixEnKxLNdI1Bm

相关文章：