Javascript ng在AngularJS中签入单选按钮
在我的angular应用程序中,我循环遍历一个集合,并使用Javascript ng在AngularJS中签入单选按钮,javascript,angularjs,radio-button,Javascript,Angularjs,Radio Button,在我的angular应用程序中,我循环遍历一个集合,并使用input type=“radio”显示记录 所以,我只需确保无论何时account.rowselected设置为某个值,都要选中该值 这很好用 但是,在selectAccount功能中,如果单击了另一个帐户,我想删除以前所有突出显示的帐户,并突出显示当前帐户 vm.selectAccount = function (account) { if (account.rowIsSelected) {
input type=“radio”
显示记录
所以,我只需确保无论何时account.rowselected
设置为某个值,都要选中该值
这很好用
但是,在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;
}
但是如果我两次单击同一行,它将不再被选中。我想保持选中并突出显示
怎么做?
我所做的一切看起来都对吗?
请帮忙。试试这个
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;
}我认为你应该像它推荐的那样,以一种稍微不同的方式组织你的单选按钮
比如:
<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
等。不要在同一元素上使用ng checked和ng model。我认为你应该一直使用ng模型。@PetrAveryanov那么我如何在选择单选按钮时选中它?Angular在单选按钮方面很时髦。您应该使用ngModel
,而不是ngChecked
。如果我两次单击同一行,选中的内容将被删除。它不应该是'ng value=“{{account}}”吗?另外,行被高亮显示,但单选按钮似乎没有被选中。ng value=“{{{account}}
您不需要括号,因为我们在这里使用ng-
指令。此外,您还可以避免ng chage
,如示例中所示。我更新了草稿,尝试一下这个。
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;
<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>
...