angularjs的单选框+ng-repeat的实现方法


Posted in Javascript onSeptember 12, 2018

最近在做项目的过程中,要求做一个考试系统,在答题页面涉及到单选框+ng-repeat来实现试卷的展示,做完后将答案传到后台,在这里主要讲下单选框+ng-repeat的几个要点

前台代码如下:

<div class="container" width="1900px" data-ng-controller="QuestionSettingCtrl">
 <div class="text-center" data-ng-repeat="item in items">
 <table>
 <tr><td data-ng-bind="$index+1 +'、 '+item.test" colSpan="4"></td></tr>
 <tr><td> </td></tr>
 <tr>
 <td><input type="radio" value="A" data-ng-model="answer[$index]" />A <span data-ng-bind="item.op1"></span> </td>
 <td><input type="radio" value="B" data-ng-model="answer[$index]" />B <span data-ng-bind="item.op2"></span> </td>
 <td><input type="radio" value="C" data-ng-model="answer[$index]" />C <span data-ng-bind="item.op3"></span> </td>
 <td><input type="radio" value="D" data-ng-model="answer[$index]" />D <span data-ng-bind="item.op4"></span> </td>
 </tr>
 </table>
 <br>
 <br>
 </div>
 <div class="text-center"><button class="btn btn-primary" style="margin: 0 auto;" data-ng-click="submit()">提交</button></div>
 <br><br><br><br>
</div>

注意到在一组radio中,使用的ng-model是一样的,原理与name类似,ng-model的值与js的数组直接绑定(通过$index来确定具体绑定到哪个 )。

js代码如下:

app.controller('QuestionSettingCtrl',function($scope, $http){
 $scope.answer = new Array(30);
 $http({
 url : "/getexamquestions",
 method : "post",
 params : {
 'account' : 30
 }
 }).success(function(res){
 $scope.items=res;
 });
 
 $scope.submit = function(){
 $http({
 url : "/submitanswer",
 method : "post",
 params : {
 'answer' : $scope.answer
 }
 }).success(function(res){
 alert("你做对了"+res+"题!");
 });
 }
});

我在controller的初始化中就创建了answer数组,与html中的radio双向绑定,在submit方法中,直接提交到后台就能够完成答案的比对。

以上这篇angularjs的单选框+ng-repeat的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
vue服务端渲染缓存应用详解
Sep 12 #Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 #Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 #Javascript
详解JavaScript中操作符和表达式
Sep 12 #Javascript
JS 数组随机洗牌的实例代码
Sep 12 #Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 #Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 #Javascript
You might like
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
js如何找出字符串中的最长回文串
2018/06/04 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python计算一个序列的平均值的方法
2015/07/11 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python实现简单http服务器功能
2018/09/17 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
环境科学专业大学生自荐信格式
2013/09/21 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
市三好学生主要事迹
2014/01/28 职场文书
会议邀请函
2015/01/30 职场文书
医生个人年终总结
2015/02/28 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书