首页 文章

收音机，复选框和选择/选项以角度2绑定

提问于
浏览 次
1

面对单选按钮的一些问题，复选框和选择/选项绑定在angular2 .

  • 如果是单选按钮，为什么具有 false 值的单选按钮甚至不是'selected'，尽管模型中的值会更新为false，如plukr所示 . 但单选按钮仍未选中为何如此？
<input type="radio" name="status" (click)="is_active = false"> //not working    
<input type="radio" name="status" (click)="is_active = true"> //working

但

<input type="radio" name="status" (click)="is_active = 'false'"> // working    
<input type="radio" name="status" (click)="is_active = true"> //working

1.1其次如何在表单提交后删除单选按钮的控件（验证）（即使在表单提交后选择了单选按钮，我使用ngModel进行表单提交） .

  • 如果是复选框，我有点困惑如何获取 checked 复选框的值 . 我不想使用（点击）方法来获取选中的值 .
<input type='checkbox' value='1' [checked]='is_checked = one'>One
<input type='checkbox' value='2' [checked]='is_checked = two'>Two
<input type='checkbox' value='3' [checked]='is_checked = three'>Three

我希望当复选框被选中时，复选框的值被选中复选框的数据，否则它将拼接（上面的代码不起作用，我知道） .

<input type='checkbox' value='1' [checked]='checked("one")'>One
<input type='checkbox' value='2' [checked]='checked("two")'>Two
<input type='checkbox' value='3' [checked]='checked("three")'>Three

到目前为止我正在使用这种方法，在课堂上我正在使用javascript .checked 检查复选框的值，如果是，则推入数组，否则通过索引从数组中拼接 .

我的收音机工作区和复选框http://plnkr.co/edit/OXnj6U3udgkKYRAVCmkp

  • 如果选择/选项，一切正常 . 但我想要这样的事情：

Route1：在Route1上选择/选项很少 . 用户在其中选择几个选项 . 然后用户naviagte使用路由到另一个路由 . 但我希望当User返回Route1页面时刷新或者Route1上的所有select /选项都是第一次取消选择 .

正如@GünterZöchbauer在答案中说的那样，我尝试了同样但又没有成功 . 我正在尝试这段代码 .

export class LsRules implements OnInit, CanReuse {
   .....Some Code Here...
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('routerCanReuse called'); 
        return false; 
    }
   .....Some Code Here...
}

但是这个控制台甚至没有为我工作 . 什么是 ComponentInstruction 这里我不知道 . 哪里我错了？

forms data-binding angular

3 回答

  • 1

    1）

    单选按钮有一些问题 .

    我得到了它的工作

    <input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

    对于类似的问题How to bind to radio buttons in angular2 beta 6

    2）您可以使用 (change) 事件来获取值

    3）我猜你在实施时得到了你想要的东西

    routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }

    另见https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html

    回复于
  • 1

    我认为SO已经停止了几分钟 . 对于复选框问题，您可以这样做 .

    <input type='checkbox' value='1' [(ngModel)]='is_checked_one' (change)="myFun('one')" >One
<input type='checkbox' value='2' [(ngModel)]='is_checked_two' (change)="myFun('two')" >two


export class AppComponent {
   is_active:boolean;
   is_checked_one:boolean=false;
   is_checked_two:boolean=false;

  val:Array<any>= [];
    constructor() { 
      console.log('Component called');
    }

    myFun(selected)
    {
      console.log(this.is_checked_one + " " + selected);
        if('one'===selected)
        {
          if(this.is_checked_one===false)
          {
            console.log('one if');
            this.val.push('one');
          }
          else
          {
            console.log('one else');
            let index=  this.val.indexOf('one');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        else
        {
          if(this.is_checked_two==false)
          {
            console.log('two if');
            this.val.push('two');
          }
          else
          {
            console.log('two else');
            let index=  this.val.indexOf('two');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        }
        }

    }
}

    工作Demo

    回复于
  • 1

    PrimeNG单选按钮允许绑定到模型值，从而简化了这一过程 . http://www.primefaces.org/primeng/#/radiobutton

    回复于

相关问题