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

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

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

因此，我只是确保每当 account.rowIsSelected 设置为某项时，都进行检查。

这工作正常。

但是，在 selectAccount 函数中，如果单击不同的帐户，我想删除以前的所有突出显示并突出显示当前的。

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

但是如果我点击同一行两次，它就不再被选中了。我想让它保持选中状态并突出显示。

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

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;

}