Angular 2:默认单选按钮选择
Angular 2: default radio button selection
我有两个单选按钮(它们不是动态生成的):
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['+recordStartDate']">Ascending<br>
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['-recordStartDate']">Descending
如何让其中一个单选按钮默认选中?
谢谢!
编辑
按钮的值正在通过此管道传递(即,本身不是组件...不确定是否值得一提?)。该应用程序非常简单,单选按钮只是硬编码到 app.component 中。管道是否是初始化默认选中哪个单选按钮的正确位置?
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'orderBy', pure: false})
export class OrderByPipe implements PipeTransform {
static _OrderByPipeComparator(a:any, b:any):number{
if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){
//Isn't a number so lowercase the string to properly compare
if(a.toLowerCase() < b.toLowerCase()) return -1;
if(a.toLowerCase() > b.toLowerCase()) return 1;
}
else{
//Parse strings as numbers to compare properly
if(parseFloat(a) < parseFloat(b)) return -1;
if(parseFloat(a) > parseFloat(b)) return 1;
}
return 0; //equal each other
}
transform(input:any, [config = '+']): any{
if(!Array.isArray(input)) return input;
if(!Array.isArray(config) || (Array.isArray(config) && config.length == 1)){
var propertyToCheck:string = !Array.isArray(config) ? config : config[0];
var desc = propertyToCheck.substr(0, 1) == '-';
//Basic array
if(!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+'){
return !desc ? input.sort() : input.sort().reverse();
}
else {
var property:string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-'
? propertyToCheck.substr(1)
: propertyToCheck;
return input.sort(function(a:any,b:any){
return !desc
? OrderByPipe._OrderByPipeComparator(a[property], b[property])
: -OrderByPipe._OrderByPipeComparator(a[property], b[property]);
});
}
}
else {
//Loop over property of the array in order and sort
return input.sort(function(a:any,b:any){
for(var i:number = 0; i < config.length; i++){
var desc = config[i].substr(0, 1) == '-';
var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-'
? config[i].substr(1)
: config[i];
var comparison = !desc
? OrderByPipe._OrderByPipeComparator(a[property], b[property])
: -OrderByPipe._OrderByPipeComparator(a[property], b[property]);
//Don't return 0 yet in case of needing to sort by next property
if(comparison != 0) return comparison;
}
return 0; //equal each other
});
}
}
编辑 2
所以在 component.app.ts
中,我将 export class AppComponent{
编辑为以下内容:
export class AppComponent {
artists = ARTISTS;
currentArtist: Artist;
orderbydescending = ['-recordStartDate'];
showArtist(item) {
this.currentArtist = item;
}
}
这在防止以前的错误方面起作用,但实际上并没有使单选按钮被选中。它仍然看起来好像没有被选中——尽管它的功能就像它被选中一样。这有意义吗?
如果您在 Angular 2+ 中使用 2 路绑定执行此操作,则在使用此 HTML 的组件中,您可以尝试初始化与输入关联的值。
// in your component ts file
orderbydescending: boolean = true;
你可以让 HTML 保持不变。虽然,您似乎有 2 个单选按钮与相同的数据值相关联,orderbydescending。我不知道这是不是你想要的,但看起来它可能会导致问题。
这里有一些来自我的个人项目的代码,可以给你一个更好的主意。
@Component({
selector: 'gmu-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
// here you would put your variables
myFlag: boolean = true;
constructor() { }
ngOnInit() {
}
}
在组件中试试这个
radioValue = {valueAsc: 'Asc', valueDesc: 'Desc'} ;
orderbydescending = 'Asc';
并在模板中放入这个
<input type="radio" name="radioGroup" [(ngModel)]="orderbydescending" [value]="radioValue.valueAsc">Ascending
<input type="radio" name="radioGroup" [(ngModel)]="orderbydescending" [value]="radioValue.valueDesc">Descending
有了这个,第一个单选按钮被选中,如果你不想选择任何单选按钮分配给变量 orderbydescending null。
orderbydescending = 'null;
如果 orderbydescending
和 recordStartDate
是您的组件的成员 class:
@Component({
...
})
export class MyComponent {
public recordStartDate: any = ...
public orderbydescending: any = +recordStartDate;
...
}
如果您使用 [value]
:
分配单选按钮值,将选中相应的单选按钮
<input type="radio" name="order" [(ngModel)]="orderbydescending" [value]="+recordStartDate">Ascending<br>
<input type="radio" name="order" [(ngModel)]="orderbydescending" [value]="-recordStartDate">Descending
在上面显示的情况下,升序单选按钮将默认选中,因为 orderbydescending
变量最初设置为 +recordStartDate
。
注意:我的示例代码中的变量是any
类型的,因为我不知道你使用的到底是什么类型的数据。您的数据可能具有更具体的数据类型。
我有两个单选按钮(它们不是动态生成的):
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['+recordStartDate']">Ascending<br>
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['-recordStartDate']">Descending
如何让其中一个单选按钮默认选中?
谢谢!
编辑
按钮的值正在通过此管道传递(即,本身不是组件...不确定是否值得一提?)。该应用程序非常简单,单选按钮只是硬编码到 app.component 中。管道是否是初始化默认选中哪个单选按钮的正确位置?
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'orderBy', pure: false})
export class OrderByPipe implements PipeTransform {
static _OrderByPipeComparator(a:any, b:any):number{
if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){
//Isn't a number so lowercase the string to properly compare
if(a.toLowerCase() < b.toLowerCase()) return -1;
if(a.toLowerCase() > b.toLowerCase()) return 1;
}
else{
//Parse strings as numbers to compare properly
if(parseFloat(a) < parseFloat(b)) return -1;
if(parseFloat(a) > parseFloat(b)) return 1;
}
return 0; //equal each other
}
transform(input:any, [config = '+']): any{
if(!Array.isArray(input)) return input;
if(!Array.isArray(config) || (Array.isArray(config) && config.length == 1)){
var propertyToCheck:string = !Array.isArray(config) ? config : config[0];
var desc = propertyToCheck.substr(0, 1) == '-';
//Basic array
if(!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+'){
return !desc ? input.sort() : input.sort().reverse();
}
else {
var property:string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-'
? propertyToCheck.substr(1)
: propertyToCheck;
return input.sort(function(a:any,b:any){
return !desc
? OrderByPipe._OrderByPipeComparator(a[property], b[property])
: -OrderByPipe._OrderByPipeComparator(a[property], b[property]);
});
}
}
else {
//Loop over property of the array in order and sort
return input.sort(function(a:any,b:any){
for(var i:number = 0; i < config.length; i++){
var desc = config[i].substr(0, 1) == '-';
var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-'
? config[i].substr(1)
: config[i];
var comparison = !desc
? OrderByPipe._OrderByPipeComparator(a[property], b[property])
: -OrderByPipe._OrderByPipeComparator(a[property], b[property]);
//Don't return 0 yet in case of needing to sort by next property
if(comparison != 0) return comparison;
}
return 0; //equal each other
});
}
}
编辑 2
所以在 component.app.ts
中,我将 export class AppComponent{
编辑为以下内容:
export class AppComponent {
artists = ARTISTS;
currentArtist: Artist;
orderbydescending = ['-recordStartDate'];
showArtist(item) {
this.currentArtist = item;
} }
这在防止以前的错误方面起作用,但实际上并没有使单选按钮被选中。它仍然看起来好像没有被选中——尽管它的功能就像它被选中一样。这有意义吗?
如果您在 Angular 2+ 中使用 2 路绑定执行此操作,则在使用此 HTML 的组件中,您可以尝试初始化与输入关联的值。
// in your component ts file
orderbydescending: boolean = true;
你可以让 HTML 保持不变。虽然,您似乎有 2 个单选按钮与相同的数据值相关联,orderbydescending。我不知道这是不是你想要的,但看起来它可能会导致问题。
这里有一些来自我的个人项目的代码,可以给你一个更好的主意。
@Component({
selector: 'gmu-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
// here you would put your variables
myFlag: boolean = true;
constructor() { }
ngOnInit() {
}
}
在组件中试试这个
radioValue = {valueAsc: 'Asc', valueDesc: 'Desc'} ;
orderbydescending = 'Asc';
并在模板中放入这个
<input type="radio" name="radioGroup" [(ngModel)]="orderbydescending" [value]="radioValue.valueAsc">Ascending
<input type="radio" name="radioGroup" [(ngModel)]="orderbydescending" [value]="radioValue.valueDesc">Descending
有了这个,第一个单选按钮被选中,如果你不想选择任何单选按钮分配给变量 orderbydescending null。
orderbydescending = 'null;
如果 orderbydescending
和 recordStartDate
是您的组件的成员 class:
@Component({
...
})
export class MyComponent {
public recordStartDate: any = ...
public orderbydescending: any = +recordStartDate;
...
}
如果您使用 [value]
:
<input type="radio" name="order" [(ngModel)]="orderbydescending" [value]="+recordStartDate">Ascending<br>
<input type="radio" name="order" [(ngModel)]="orderbydescending" [value]="-recordStartDate">Descending
在上面显示的情况下,升序单选按钮将默认选中,因为 orderbydescending
变量最初设置为 +recordStartDate
。
注意:我的示例代码中的变量是any
类型的,因为我不知道你使用的到底是什么类型的数据。您的数据可能具有更具体的数据类型。