效果圖:
html文件:複製後可直接運行
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>angularJs</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.container {
margin-top: 100px;
}
.checkbox-dg label {
position: relative;
display: inline-block;
margin-right: 30px;
padding: 15px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
vertical-align: middle;
cursor: pointer
}
.checkbox-dg input[type=radio], .checkbox-dg input[type=checkbox] {
margin: 0;
opacity: 0;
display: none
}
.checkbox-dg input[type=radio]:checked + label,
.checkbox-dg input[type=checkbox]:checked + label {
border: 1px solid #6cbbee;
background-color: #ddd
}
.round label {
border-radius: 50%
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="myCtrl as vm">
<div class="row form-group" ng-repeat="outItem in qustions track by $index">
<div class="row form-group">{{$index+1}} / {{qustions.length}} : {{outItem.Name}} <span ng-if="outItem.isMultiple">(多選)</span>
</div>
<ul class="nav navbar-nav navbar-left">
<li ng-repeat="item in outItem.Selection">
<div class="checkbox-dg round" ng-if="!outItem.isMultiple">
<input id="radio{{outItem.Qno}}{{item}}" type="radio" name="answer{{outItem.Qno}}" value="{{item}}"
ng-model="outItem.Selectioned">
<label for="radio{{outItem.Qno}}{{item}}">{{item.Ano}}:{{item.value}}</label>
</div>
<div class="checkbox-dg round" ng-if="outItem.isMultiple">
<input id="checkbox{{outItem.Qno}}{{item}}" type="checkbox" name="answer{{outItem.Qno}}"
ng-model="item.checked">
<label for="checkbox{{outItem.Qno}}{{item}}">{{item.Ano}}:{{item.value}}</label>
</div>
</li>
</ul>
</div>
<div class="row form-group">選中答案:<br>{{qustions}}</div>
<div class="row form-group">
<input class="btn btn-primary" type="submit" ng-click="vm.save()" value="確認">
</div>
<div class="row form-group">{{ vm.finalValue}}</div>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
var vm = this;
$scope.qustions = [
{
Qno: '11111',
Name: '第一題:1+1=?',
Selection: [{Ano: 'A', value: '1'}, {Ano: 'B', value: '2'}, {Ano: 'C', value: '3'}],
Selectioned: '{"Ano":"B","value":"2"}'
},
{
Qno: '22222',
Name: '第二題:3*3=?',
Selection: [{Ano: 'A', value: '3'}, {Ano: 'B', value: '6'}, {Ano: 'C', value: '9'}]
},
{
Qno: '33333',
Name: '第三題:你喜歡的水果?',
isMultiple: true,
Selection: [{Ano: 'A', value: '蘋果'}, {Ano: 'B', value: '梨子'}, {Ano: 'C', value: '香蕉'}]
}];
vm.save = save;
function save() {
vm.finalValue = [];
angular.forEach($scope.qustions, function (item) {
console.log('轉義前是字符串(value裏面的值就是轉義前的):', item.Selectioned);
console.log('字符串轉成對象:', angular.fromJson(item.Selectioned));
console.log('對象轉成字符串:', angular.toJson(angular.fromJson(item.Selectioned)));
vm.finalValue.push({
Qno: item.Qno,
SelectionedId: item.isMultiple ? item.Selection.filter(i => i.checked).map(j => j.Ano) : angular.fromJson(item.Selectioned).Ano
});
});
}
});
</script>
</body>
</html>