Question

在我的角度应用程序中，我循环遍历集合并使用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等。

在AngularJS中的单选按钮中检查

2 个答案: