代码之家 › 专栏 › 技术社区 › Boosman

角度2:默认单选按钮选择

checked radio-button angular html javascript

2

Boosman · 技术社区 · 8 年前

我有两个单选按钮(它们不是动态生成的):

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

所以在 component.app.ts export class AppComponent{ 以下内容:

export class AppComponent {
  artists = ARTISTS;
  currentArtist: Artist;
  orderbydescending = ['-recordStartDate'];

showArtist(item) {
  this.currentArtist = item;

} }

3 回复 | 直到 8 年前

1

SaxyPandaBear 8 年前

如果您在Angular 2+和双向绑定中执行此操作,那么在使用此HTML的组件中,您可以尝试初始化与输入关联的值。

// in your component ts file
orderbydescending: boolean = true;

这里有一些来自我个人项目的代码,可以给你一个更好的想法。

@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() {
  }
}

2

1

ConnorsFan 8 年前

orderbydescending recordStartDate 是组件类的成员:

@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

在上述情况下,默认情况下将选中升序单选按钮,因为 按降序排序 变量最初设置为 +recordStartDate

注意:我的示例代码中的变量类型为 any 因为我不知道你在用什么样的数据。您的数据可能具有更具体的数据类型。

3

1

alehn96 8 年前

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;