代码之家  ›  专栏  ›  技术社区  ›  Gvs Akhil

参数表获取未选中复选框的所有数据

  •  0
  • Gvs Akhil  · 技术社区  · 7 年前

    我正在使用NgPrime表,我正在练习学校申请。我正在使用考勤模块,我将用复选框显示所有学生名单,他们应该勾选出席者。所以我在复选框上触发了一个点击事件 如果未选中复选框,则无法获取值 .

              <ng-template pTemplate="body"
                  let-student
                  let-i="rowIndex"
                  >
                  <tr [pSelectableRow]="student">
                      <td >{{i+1}}</td>
                      <td>{{student.regnum}}</td>
                      <td>
                        <p-checkbox name="groupname" value="val1" (click)="attendance($event, student)"></p-checkbox>
                      </td>
                      <td>
                      </td>
                  </tr>
              </ng-template>
    

    TS代码:

    ngOnInit() {
        //Get students data on page load
        this.http.get('http://localhost:3000/api/student/studentslist').subscribe(res => {
          let data = res.json();
          this.student = data;
        });
    
        // For ngprime column names
        this.cols = [
          { field: 'S.No', header: 'S.No' },
          { field: 'regnum', header: 'Regnum' },
          { field: 'attendance', header: 'Attendance' }
      ];
      }
    
      //Save student regnums who are present
      attendance(checkbox, student) {
        if(checkbox.srcElement.checked) {
          this.checkedstudents.push(student.regnum);
        }
        else {
          this.removeStudent(student.regnum);
        }
      }
    
      //Remove Students who are clicked after unselecting the checkbox
      removeStudent(regnum){
        this.checkedstudents.forEach((item, index) => {
          if(item === regnum) this.checkedstudents.splice(index,1);
        });
     }
    

    正如你在上面的代码中所看到的,我只是触发了一个关于复选框值变化的事件,所以我只能获得在场学生的数据。只要给我一些答案,就可以找到缺席的学生**(复选框中没有勾号)**

    enter image description here

    解决方案1: 我可以这样尝试,但我不喜欢:

    在页面加载时,我可以保存数组中存在的所有regnum,当选中某个复选框时,我可以获取它的regnum值,并将其从上一个数组中拼接。我知道这是一个漫长而愚蠢的过程,我也想在ngprime表中获得提交点击的所有数据(这很容易,帮助我了解如何处理表中的数据)

    解决方案2:我试过了

    <ng-template pTemplate="footer" let-student>
                  <tr>
                    <td>
                        <button type="submit" style="width: 50%;"
              class="btn btn-2 btn-2g" (click)="submitattendance(student)">Submit</button>
                    </td>
                </tr>
            </ng-template>
    

    TS文件

    submitattendance(student) {
       console.log(student);
     }
    

    但控制台显示的只是我为学生创建的模型,而不是数据

    提前谢谢,祝你愉快

    1 回复  |  直到 7 年前
        1
  •  0
  •   Sunil Singh    7 年前

    如果你有房地产 checked (或者你可以使用新的)在 student 对象绑定复选框,然后可以通过 ngModel 并获取所有财产被检查的学生的名单。

    <p-checkbox name="groupname" [(ngModel)]="student.checked"></p-checkbox>
    

    没必要 click 事件

    推荐文章