ng-checked 在 AngularJS 中的单选按钮中

Question

在我的 Angular 应用程序中，我正在遍历一个集合并使用 input type="radio" 显示记录。

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

在我的控制器中，我首先将所有帐户的 rowIsSelected 属性设置为 false。

response.data.results.forEach(function(account) {
   account.rowIsSelected = false;
});

所以，我只是确保无论何时 account.rowIsSelected 设置为某个值，都选中它。

这工作正常。

但是，在selectAccount函数中，如果点击不同的帐户，我想remove the previous all highlights and highlight the current one。

    vm.selectAccount = function (account) {
        if (account.rowIsSelected) {

            //First set all false
            vm.pagedAccounts.items.forEach(function(account) {
                account.rowIsSelected = false;
            });

            var selectedAccount = vm.pagedAccounts.items
                .filter(function(x){
                    return x.id=== account.id;
                });

            //Then set only that accounts property to true
            selectedAccount[0].rowIsSelected = true;
        } 

但如果我点击同一行两次，it is no longer checked. I want to keep it checked and highlighted。

怎么做？ 我所做的一切看起来对吗？ 请帮忙。

Answer 1

试试这个。

vm.selectAccount = function (checkedItem) {
    var selectedAccount;
    vm.pagedAccounts.items.forEach(function(account) {
        if(checkedItem.id == account.id){
           selectedAccount = account;
           account.rowIsSelected = true;
        }else{
           account.rowIsSelected = false;
        }

    });
    //Then set only that accounts property to true
    selectedAccount[0].rowIsSelected = true;

}

Answer 2

我认为你应该以不同的方式组织你的单选按钮，就像它推荐的 angularjs

类似：

<tr ng-repeat="account in vm.pagedAccounts.items"
    ng-class="{ 'highlight': vm.pagedAccounts.selected === account }">
    <td>
        <input
            ng-model="vm.pagedAccounts.selected"
            ng-value="account"
            type="radio">
     </td>
...

当ng-model 的值等于ng-value 时，应该自动选择单选按钮，因此您不需要任何特定的逻辑或ng-checked 等。