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 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP如何使用Memcached
2016/04/05 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
JS实现点击掉落特效
2021/01/29 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python正则实现提取电话功能
2018/02/24 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
雏鹰争章活动总结
2014/05/09 职场文书
还款承诺书范文
2014/05/20 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers