【Angular2】CheckBox获取值的两种方式
来源:互联网 发布:内存数据库有哪些 编辑:程序博客网 时间:2024/06/06 17:24
前言
因为项目中需要用到CheckBox向后台提交数据
最开始设定的是学生选择什么就直接把答案合成一个字符串传到后端
但是需要回显学生答案,后端返回的json数据中答案是一个处理后的字符串,无法进行判断
所以采用数组形式答案,可以在HTML中利用模板表达式进行循环遍历判断,从而实现答案回显的功能
方式一 _ 答案合成字符串
html code
<div> <p>{{question.questionMainOrder + ". " + question.questionContent}}</p> <div *ngFor="let option of question.questionSubList;let i=index"> <input type="checkbox" name="{{option.questionMainId}}" value="{{option.optionsContent}}" id="{{option.optionOrder}}" (click)="updateAnswer($event.target,$event.target.checked, $event.target.value)"> {{alphabet[i]}}{{'. '+option.optionsContent}} </div></div>
ts code
private options: Array<string> = [];//用户的答案选项(在方法外声明,否则本题刚选择答案会消失)updateAnswer(el: Element, checked: boolean, value: string) { //获得用户的答案 var index: number = this.options.indexOf(value); if (checked) { if (index < 0) { this.options.push(value+"|"); } } else { if (index > -1) { this.options = this.options.filter((ele, index) => { return ele != value; }) } } //将答案合成字符串,用分隔符分开 let strInput: string = ""; for (var i = 0; i < this.question.questionSubList.length; i++) { if (this.inputs[i] == "" || this.inputs.length < this.question.questionSubList.length) { answer.done = false; } if (this.inputs[i] != null) { strInput = strInput + this.inputs[i] + "|"; } else { strInput = strInput + "|"; } } //处理用户答案 if (this.options.length == 0) { answer.studentAnswer = ""; answer.done = false; } else { let strChecked: string = ""; this.options.forEach((val, idx, array) => { strChecked = strChecked + val; }); answer.studentAnswer = strChecked; answer.done = true; } //传递用户的答案 this.updatedAnswer.emit(answer); this.updateStudentAnswerToBackend(answer);}
方式二 _ 答案转为数组
html code
<div> <p>{{question.questionMainOrder + ". " + question.questionContent}}</p> <div *ngFor="let option of question.questionSubList;let i=index"> <input type="checkbox" name="{{option.questionMainId}}" value="{{option.optionsContent}}" id="{{option.optionOrder}}" checked="{{option.optionsContent==question.studentAnswerArray[i] ? 'checked' : ''}}" (click)="updateAnswer($event.target,$event.target.checked, $event.target.value)"> {{alphabet[i]}}{{'. '+option.optionsContent}} </div></div>
ts code
private options: Array<string> = [];//用户的答案输入(在方法外声明,否则本题刚选择答案会消失)updateAnswer(el: Element, checked: boolean, value: string) { //用户的答案(在方法内声明,每次提交为新答案实体,simplechange才会识别) let answer: Answer = new Answer; //声明数组 answer.studentAnswerArray=[]; //获得题目id let questionid: string = el.getAttribute("name"); //获得选项id let optionid:number =Number(el.getAttribute("id")); if(checked==true){ this.options[optionid-1]=value; }else{ this.options[optionid-1]=""; } //处理选项结果 for (var i = 0; i < this.question.questionSubList.length; i++) { if(this.options[i]=="" || this.options[i]==null){ this.options[i]="" } } //处理用户答案 answer.studentId=localStorage.getItem("studentCode"); answer.paperId=this.paperId; answer.questionTypeId=this.questionTypeId; answer.questionMainId=questionid; answer.studentAnswerArray=this.options; answer.done=false; for(var i=0;i<this.options.length;i++){ if(this.options[i]=="" || this.options[i]==null){ }else{ answer.done=true; } } console.log("question-checkbox-answer--"+answer); //传递用户的答案 this.updatedAnswer.emit(answer); this.updateStudentAnswerToBackend(answer); }
小结
根据不同的需求采用不同的实现,需要对开发语言有一个很好的了解
这样遇到问题才会提出一些解决方案,前后端共同完善
最后,尽可能以最小的代价做修改
阅读全文
0 0
- 【Angular2】CheckBox获取值的两种方式
- Flex CheckBox Tree 的两种方式
- 设置checkbox为只读(readOnly)的两种方式
- 实现checkBox readonly功能的两种方式
- jsp中checkbox或select从后台获取值后默认选中的两种写法
- 两种方式实现checkBox readonly功能
- js获取url参数值的两种方式
- 获取Owner属性值的两种方式---Owner
- js获取url参数值的两种方式详解
- js获取select标签选中值的两种方式
- js获取url参数值的两种方式
- js获取url参数值的两种方式
- js获取url参数值的两种方式详解
- js获取url参数值的两种方式
- js获取url参数值的两种方式
- js获取url参数值的两种方式
- js获取url参数值的两种方式
- js获取url参数值的两种方式
- 知识点汇总
- C++ 基本语法
- EJB 概念
- Kubernetes之蓝绿部署
- Android ListView基本使用
- 【Angular2】CheckBox获取值的两种方式
- 求助贴
- leetcode题解之Longest Substring Without Repeating Characters
- 【操作系统】第二章小结
- Android模拟器Genymotion安装使用教程详解
- jQuery 事件
- 1499 图
- c#获取屏幕上某坐标点的颜色
- java获取屏幕上某坐标点的颜色