2015-10-25 5 views
1

Я разрабатываю приложение для викторины в angularJS. HTML кодКак использовать кнопку отправки, чтобы отправить все детали формы в angularJS

`

<div class='question' ng-repeat='question in quiz ' value='{{$index}}'> 
     <h3>{{$index+1}}. {{question.q}}</h3> 
      <div ng-repeat = "options in question.options"> 
      <input type='radio'> <strong>{{options.value}}</strong> 

      </div> 
    </div> 

    <input type="button" value="Submit" ng-click= submitAnswer()> 
    <script src="quizController.js"></script> 
</body> 

`

И Javascript Файл

$scope.submitAnswer =function(){ }

Я хочу, чтобы, когда пользователь отвечает на все вопросы, все значения радио-кнопка (ответы) должна быть передана submitAnswer() при нажатии кнопки отправки.

ответ

1

function quizCtrl($scope) { 
 
    $scope.model = { 
 
    question: [] 
 
    }; 
 

 
    $scope.quiz = [{ 
 
    q: 'Question1', 
 
    options: [{ 
 
     value: 'a' 
 
    }, { 
 
     value: 'b' 
 
    }] 
 
    }, { 
 
    q: 'Question2', 
 
    options: [{ 
 
     value: 'c' 
 
    }, { 
 
     value: 'd' 
 
    }] 
 
    }]; 
 

 
    $scope.submitAnswer = function() { 
 
    console.log($scope.model); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app> 
 
    <div ng-controller="quizCtrl"> 
 
    <div class="question" ng-repeat="question in quiz"> 
 
     <h3>{{$index+1}}. {{question.q}}</h3> 
 

 
     <div ng-repeat="option in question.options"> 
 
     <input type="radio" ng-model="model.question[$parent.$index]" value="{{option.value}}"> 
 
     <strong>{{option.value}}</strong> 
 
     </div> 
 
    </div> 
 
    <input type="button" value="Submit" ng-click="submitAnswer()"> 
 
    <div>{{model}}</div> <!-- for debugging --> 
 
    </div> 
 
</body>

Теперь каждый ответ на каждый вопрос будет храниться в массиве в модели. Структура модели выглядит следующим образом: $scope.model.question[$index] = 'value'

Вопросы индексируются от 0, поэтому первый вопрос находится на $scope.model.question[0]. Теперь, если вы хотите отправить его в API, просто отправьте массив question через $http.

+0

Спасибо Это сработало – Gaurav

0

Сначала вам нужно поместить свои поля ввода и кнопку в тег формы. Затем добавьте директиву ng-submit в форму и назначьте ей функцию submitAnswer().

Убедитесь, что тип вашей кнопки тоже «отправлен», а не «кнопка».

<form ng-submit="submitAnswer()"> 
    <div class='question' ng-repeat='question in quiz ' value='{{$index}}'> 
     <h3>{{$index+1}}. {{question.q}}</h3> 
     <div ng-repeat = "options in question.options"> 
      <input type='radio'> <strong>{{options.value}}</strong> 
     </div> 
    </div> 
    <button type="button">Submit</button> 
    </form>