未检查单选按钮

Question

我有一个集合，我正在循环它。

<tbody>
    <tr ng-repeat="account in vm.pagedAccounts.items"
        ng-class="{ 'highlight': (account.rowIsSelected === account) }"
        <td>
            <input
                ng-model="account.rowIsSelected"
                ng-value="{{account}}"
                name="selectedAccount"
                ng-change="vm.selectAccount(account)"
                type="radio">
        </td>

ng-value 设置为整个account object。 现在，该行被突出显示，但按钮未被选中。 在控制器中，

vm.selectAccount = function (account) {
    account.rowIsSelected = account;
}

我做错了什么？

Answer 1

我认为这就是您要寻找的。与其使用ng-change，不如使用单独的selected 模型。

查看

<div ng-controller="MyCtrl as vm">
  <table>
    <tbody>
      <tr ng-repeat="account in vm.items" 
          ng-class="{ 'highlight': account === vm.selected }">
        <td>
          Input:
          <input ng-model="vm.selected" 
                 ng-value="account"
                 name="selectedAccount"
                 ng-click="vm.resetOthers(account)"
                 type="radio">
        </td>
      </tr>
    </tbody>
  </table>
</div>

AngularJS 应用程序

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  let vm = this;

  vm.selected = null;

  vm.items = [{
    rowIsSelected: false
  }, {
    rowIsSelected: false
  }, {
    rowIsSelected: false
  }];
});

> demo fiddle

Answer 2

如果你想选中单选按钮，你应该将ng-value设置为true，你不能绑定整个复杂对象它应该是布尔值。

<input
    ng-value="account.rowIsSelected"
    name="selectedAccount"
    ng-change="vm.selectAccount(account)"
    type="radio">