[英]Get value of multiple checkbox in angular primeng
app.component.ts app.component.ts
import { Component, OnInit } from '@angular/core';
import { supportsWebAnimations } from '@angular/animations/browser/src/render/web_animations/web_animations_driver';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
users: Array<any>;
permissions: Array<any> = [];
ngOnInit(){
this.users = [
{id: 1, name: 'Sam', permission: []},
{id: 2, name: 'Adam', permission: []},
{id: 3, name: 'Chris', permission: []}
]
}
}
app.component.html app.component.html
<h3 class="first">Permission</h3>
<div class="ui-g" style="margin-bottom:10px; ">
<div class="ui-g-2"><b>Name</b></div>
<div class="ui-g-2"><b>Read</b></div>
<div class="ui-g-2"><b>Write</b></div>
</div>
<div class="ui-g" style="margin-bottom:10px;" *ngFor ="let user of users; let i = index">
<div class="ui-g-2">{{user.name}}</div>
<div class="ui-g-2"><p-checkbox name="group[i]" value="Read" [(ngModel)]="permissions[i]" inputId="R"></p-checkbox></div>
<div class="ui-g-2"><p-checkbox name="group[i]" value="Write" [(ngModel)]="permissions[i]" inputId="W"></p-checkbox></div>
</div>
Instead of maintaining a permission
array you can maintain a permission
object and bind it your checkboxes. 除了维护
permission
数组,您还可以维护一个permission
对象并将其绑定到您的复选框。
There will be no need to maintain an index in that case. 在这种情况下,将不需要维护索引。
Your code will be like this: 您的代码将如下所示:
import { Component, OnInit } from '@angular/core';
import { supportsWebAnimations } from '@angular/animations/browser/src/render/web_animations/web_animations_driver';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
users: Array<any>;
permissions: Array<any> = [];
ngOnInit(){
this.users = [
{id: 1, name: 'Sam', permission: { read: true, write: true}},
{id: 2, name: 'Adam', permission: { read: false, write: true}},
{id: 3, name: 'Chris', permission: { write: true, read: false}}
]
}
}
And your HTML: 而您的HTML:
<h3 class="first">Permission</h3>
<div class="ui-g" style="margin-bottom:10px; ">
<div class="ui-g-2"><b>Name</b></div>
<div class="ui-g-2"><b>Read</b></div>
<div class="ui-g-2"><b>Write</b></div>
</div>
<div class="ui-g" style="margin-bottom:10px;" *ngFor ="let user of users; let i = index">
<div class="ui-g-2">{{user.name}}</div>
<div class="ui-g-2"><p-checkbox type="checkbox" name="group[i]" value="Read" [(ngModel)]="user.permission.read" inputId="R"></p-checkbox></div>
<div class="ui-g-2"><p-checkbox type="checkbox" name="group[i]" value="Write" [(ngModel)]="user.permission.write" inputId="W"></p-checkbox></div>
</div>
And with PrimeNG 并与PrimeNG
You need to add 您需要添加
binary="true"
二进制=“真”
attribute to your checkbox 属性归您的复选框
You have to have those read/write flags in your model and connect those to proper checkboxes. 您必须在模型中具有那些读/写标志,并将这些标志连接到适当的复选框。 eg
例如
this.users = [
{id: 1, name: 'Sam', permission: {read:false,write:false}},
{id: 2, name: 'Adam', permission: {read:false,write:false}},
{id: 3, name: 'Chris', permission: {read:false,write:false}}
]
and 和
<div class="ui-g" style="margin-bottom:10px;" *ngFor ="let user of users; let i = index">
<div class="ui-g-2">{{user.name}}</div>
<div class="ui-g-2"><p-checkbox [(ngModel)]="user.permissions.read" inputId="R"></p-checkbox></div>
<div class="ui-g-2"><p-checkbox [(ngModel)]="user.permissions.write" inputId="W"></p-checkbox></div>
</div>
values in model will switch accordingly to true/false depending on checkbox state. 模型中的值将根据复选框状态相应地切换为true / false。 That is at least how I would do it.
至少那是我会做的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.