将输入复选框显示为以角度方式加载检查

时间:2018-03-22 17:48:15

标签: angular angular-pipe

我对角度很新。我已经创建了一个用于过滤内容的管道。 一切正常。我只需要“输入已检查”进行加载。默认情况下,所有这些都未选中

pipe.ts

export class PlayerFilterPipe implements PipeTransform {
  transform(items: Array<any>, position1: any, position2: any, position3: any, position4: any, active:any) {
    //debugger
    if (items && items.length){
        return items.filter(item =>{
            if (position1 && item.position_name.toLowerCase().indexOf('حارس مرمى') !== -1) {
                return true;
            }
            if (position2 && item.position_name.toLowerCase().indexOf('مدافع') !== -1){
                return true;
            }
            if (position3 && item.position_name.toLowerCase().indexOf('خط وسط') !== -1){
                return true;
            }
            if (position4 && item.position_name.toLowerCase().indexOf('مهاجم') !== -1){
                return true;
            }
            if (active && item.P_Active.toLowerCase().indexOf('1') !== -1){
                return true;
            }
            return false;
       })
    }
    else{
        return items;
    }
  }
}

HTML

<div class="col-12 col-sm-4 col-md">
        <label class="tgl tgl-gray">
            <input type="checkbox"  name="position1" [(ngModel)]="position1" value="حارس مرمى">
            <span>&nbsp;&nbsp;&nbsp;</span> 
            حارس مرمى
        </label>
    </div>

1 个答案:

答案 0 :(得分:0)

您可以使用输入标签上的[checked]属性。可以将此属性分配给控制器上的变量,该变量将在页面加载时将值呈现为true。

因此输入标记看起来像:

<input type="checkbox" name="active" [(ngModel)]="active" value="1" [checked]="setState">

在控制器中,可以将 setState 变量定义为布尔类型,以在ngOnInit或用于获取初始值的任何其他过程中返回条件。