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

最近在做项目的过程中，要求做一个考试系统，在答题页面涉及到单选框+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的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angularjs单选框相关的示例代码

    Angularjs单选框相关的示例代码

    本文介绍了Angularjs单选框相关的示例代码,分享给大家.具体如下: 使用angular1.6.5 1.ng 获取ng-repeat遍历出来的radio的value 1)普通形式(不使用ng-repeat) 可以正常显示 <input type="radio" name="t1" ng-model="demo" value="a">a <br> <input type="radio&

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • Angular ng-repeat 对象和数组遍历实例

    直接上代码 <!DOCTYPE html> <html> <head> <meta name="description" content="[Ngrepeat in obj and arr]"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

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

    最近在做项目的过程中,要求做一个考试系统,在答题页面涉及到单选框+ng-repeat来实现试卷的展示,做完后将答案传到后台,在这里主要讲下单选框+ng-repeat的几个要点 前台代码如下: <div class="container" width="1900px" data-ng-controller="QuestionSettingCtrl"> <div class="text-center" data-

  • angularJs提交文本框数据到后台的方法

    如下所示: ng-model="name" //填写的数据提交到index.php index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body&g

  • 使用AngularJS处理单选框和复选框的简单方法

    AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

  • Jquery和angularjs获取check框选中的值的方法汇总

    在我们平常的开发中,有时候会需要获取一下check框选中的值,以及check框选中行的所有信息.这个时候有一个小技巧那就是我们可以把要获取的信息全部放到check框的值里面,这样我们可以获取check框选中值的时候也就相当于获取了当前行的信息. 复制代码 代码如下: <td><input class="states" type="checkbox"  name="orders"  value="{{e.merchant

  • 利用原生js和jQuery实现单选框的勾选和取消操作的方法

    根据以下的Demo,大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = document.getElementById("b1"); //alert(

  • AngularJS 单选框及多选框的双向动态绑定

    AngularJS 单选框及多选框的双向动态绑定

    AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

  • AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

  • AngularJS中下拉框的高级用法示例

    AngularJS中下拉框的高级用法示例

    本文实例讲述了AngularJS中下拉框的高级用法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp"> <!-- 对象内部属性遍历:x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for

  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    本文实例讲述了AngularJS中下拉框的基本用法.分享给大家供大家参考,具体如下: HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于: <select> <option

随机推荐