Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html data-ng-app='app'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
​
</head>
<body>
  
  <div data-ng-controller="MainCtrl">
    
    <!-- click a button to see a form -->
    <button data-ng-click="getQuestions('qs1')">Form 1</button>
    <button data-ng-click="getQuestions('qs2')">Form 2</button>
    <button data-ng-click="getQuestions('qs3')">Form 3</button>
    
    <h1>The form</h1>
    
    <form action="">
     
      <p data-ng-repeat="item in questions track by $index">
        
        <!-- show: type is a non-radio buttons -->
        <label>{{ item.question_text }}</label>
        <input data-ng-if="item.type !== 'radio'" type={{item.type}}>
        
        <!-- show: type is radio button -->
        <span data-ng-if="item.type === 'radio'" data-ng-repeat="opt in item.options">
           <input type="radio" value="{{ opt.value }}" name="{{ opt.name }}"> {{ opt.label }}
        </span>
        
      </p>
     
    </form>
    
    
  </div>
  
</body>
</html>
 
form {
  background: white;
  padding: 24px;
  
  p {
    border-bottom: solid 1px rgba(0,0,0,.1);
    padding-bottom: 12px;
    margin-bottom: 24px;
  }
}
 
var app = angular.module('app', []);
​
app.controller('MainCtrl', ['$scope', function ($scope) {
  
  $scope.currentCategory = null;
  
  $scope.currentQuestions = [];
  
  $scope.getQuestions = function (questionSet) {
    
    //make service call based on category and return questions
    //$scope.currentQuestions = result of service
    
    //stubbed for example:
    $scope.questions = [
      {
        "answers": [
          "Answer 1",
          "Answer 2",
          "Answer 3"
        ],
        "id": "59839d20c405bc411540a11d",
        "question_number": "Q1",
        "question_text": "Are you okay??",
        "type": "radio",
        "options": [{
          "value": true,
          "label": "Yes",
          "name": "status"
        }, {
          "value": false,
          "label": "No",
          "name": "status" 
        }]
      },
      {
        "answers": [
          "Answer 1",
          "Answer 2",
          "Answer 3"
        ],
        "id": "59839d2dc405bc411540a11e",
        "question_number": "Q2",
        "question_text": "Check yes if you're having a good day!",
        "type": "checkbox" //this was check, needed to be checkbox - either update service or manipulate it on your end
      }
    ];
    
  };
 
  
}]);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kauffmanespro
0viewers