【Angular1學習Demo】實現問答卷

效果圖: 

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章