搜索

首页  >  问答  >  正文

javascript - angular2如何双向绑定多个checkbox?

比如我又一个数组如下:

var array = ['喜欢','不喜欢','非常喜欢','超级喜欢','喜欢得不得了'];

html模板中

<p class="like" *ngFor="let e of array">
    <input type="checkbox" name="like" value="{{e}}">
</p>
<p class="youselect"></p>

我盖如何实现,选中其中一个checkbox后,能在p.youselect中显示出我已经选中的内容,如果是多选,则呈现出数组或者以逗号隔开的形式

比如我选中了“喜欢”,“喜欢得不得了”,那么p.youselect中则显示出:
“喜欢,喜欢得不得了”

可以使用formArray等方式进行,但是我在使用过程中都没有实现。希望大神出手帮帮忙!

高洛峰高洛峰2739 天前1038

全部回复(2)我来回复

  • 我想大声告诉你

    我想大声告诉你2017-06-26 10:57:43

    谢邀,基于你给的数据结构,但建议还是使用如下数据结构(表单提交的时候,一般提交的对应的id项):

    [ 
       { name: '喜欢',  selected: true, id: 0 },
       { name: '不喜欢', selected: false, id: 1 }
    ]

    具体可以参考 - handling-multiple-checkboxes-in-angular-forms

    简单的示例代码如下:

    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    
    @Component({
      selector: 'my-app',
      template: `
       <form [formGroup]="myForm">
        <p class="like" *ngFor="let like of likes.controls; let i = index;" >
          <input type="checkbox" [formControl]="like"> 
         {{likesArr[i]}}
        </p>
        <p class="youselect">{{selects}}</p>
       </form>
      `,
    })
    export class AppComponent implements OnInit{
    
      myForm: FormGroup;
    
      likesArr: string[] = ['喜欢','不喜欢','非常喜欢','超级喜欢','喜欢得不得了'];
    
      selects: string[] = ['喜欢'];
    
      constructor(private fb: FormBuilder) {}
    
      ngOnInit() {
        this.myForm = this.fb.group({
          likes: this.fb.array([true, false, false, false, false])
        });
    
        this.likes.valueChanges.subscribe(values => {
          let selects: string[] = [];
          values.forEach((selected: boolean ,i: number) => {
            selected === true && selects.push(this.likesArr[i])
          });
          this.selects = selects;
        });
      }
    
      get likes () {
        return this.myForm.get('likes');
      }
    
    }
    

    回复
    0
  • 欧阳克

    欧阳克2017-06-26 10:57:43

    个人感觉不用 Forms 好像更简单吧。。。
    写了一个 Fiddle: https://jsfiddle.net/phnjg6hf/4/

    HTML:

    <test-component></test-component>
    <script id="some" type="text/plain">
        <p>Result: {{result()}}</p>
        <p *ngFor="let w of arr">
            <label>
                <input type="checkbox" value="{{w}}" [checked]="selections[w]" (change)="handle($event)" />
                {{w}}
            </label>
        </p>
    </script>

    JS:

    var Thing = ng.core.Component({
        selector: "test-component",
        template: document.getElementById("some").innerHTML
    })(function () {
        this.selections = { First: true };
        this.arr = ["First", "Second", "Third"];
    });
    
    Thing.prototype.result = function () {
        var that = this;
        return this.arr.filter(function (x) {
            return that.selections[x];
        }).join(", ");
    };
    
    Thing.prototype.handle = function (e) {
        var t = e.target, v = t.value, c = t.checked;
        this.selections[v] = c;
    };
    
    var AppModule = ng.core.NgModule({
        imports: [ng.platformBrowser.BrowserModule],
        declarations: [Thing],
        bootstrap: [Thing],
        providers: []
    })(function () { });
    
    ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(AppModule);

    回复
    0
  • 取消回复