javascript - angular2如何雙向綁定多個(gè)checkbox?
問題描述
比如我又一個(gè)數(shù)組如下:
var array = [’喜歡’,’不喜歡’,’非常喜歡’,’超級喜歡’,’喜歡得不得了’];
html模板中
<p *ngFor='let e of array'> <input type='checkbox' name='like' value='{{e}}'></p><p class='youselect'></p>
我蓋如何實(shí)現(xiàn),選中其中一個(gè)checkbox后,能在p.youselect中顯示出我已經(jīng)選中的內(nèi)容,如果是多選,則呈現(xiàn)出數(shù)組或者以逗號隔開的形式
比如我選中了“喜歡”,“喜歡得不得了”,那么p.youselect中則顯示出:“喜歡,喜歡得不得了”
可以使用formArray等方式進(jìn)行,但是我在使用過程中都沒有實(shí)現(xiàn)。希望大神出手幫幫忙!
問題解答
回答1:謝邀,基于你給的數(shù)據(jù)結(jié)構(gòu),但建議還是使用如下數(shù)據(jù)結(jié)構(gòu)(表單提交的時(shí)候,一般提交的對應(yīng)的id項(xiàng)):
[ { 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 *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’); }}回答2:
個(gè)人感覺不用 Forms 好像更簡單吧。。。寫了一個(gè) Fiddle: https://jsfiddle.net/phnjg6hf/4/
HTML:
<test-component></test-component><script 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);
相關(guān)文章:
1. windows誤人子弟啊2. mysql優(yōu)化 - MySQL如何為配置表建立索引?3. 實(shí)現(xiàn)bing搜索工具urlAPI提交4. 關(guān)于mysql聯(lián)合查詢一對多的顯示結(jié)果問題5. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個(gè)坑!求助下面的存儲過程哪里錯(cuò)啦,實(shí)在是找不到哪里的問題了。6. 我在網(wǎng)址中輸入localhost/abc.php顯示的是not found是為什么呢?7. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器8. python - linux怎么在每天的凌晨2點(diǎn)執(zhí)行一次這個(gè)log.py文件9. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)10. 冒昧問一下,我這php代碼哪里出錯(cuò)了???
