Form Select with Options

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" class="container">
  <div ng-controller="Controller1 as ctrl">
     <div ng-repeat="form in ctrl.form">
       <div class="form-group">
         <label>{{form.label}}</label>
        <div ng-switch="form.type">
          <input type="text" ng-switch-when="text" ng-model="ctrl.person[form.id]" class="form-control">
          <select
            class="form-control"
            ng-switch-when="select"
            ng-model="ctrl.person[form.id]"
            ng-options="s.id as s.name for s in form.options">
            <option>Select One</option>
         </select>
        </div>
        </div>
     </div>
     <div class="form-group">
     </div>
     
     <hr>
       First: {{ctrl.person.first_name}}<br>
       Marital Status: {{ctrl.person.marital_status}}
  </div>
</div>

CSS

body {
  padding-top: 20px;
}

JavaScript

angular
  .module('app', [])
  .controller('Controller1', Controller1);

function Controller1($scope) {
  var vm = this;
	vm.person = {};
  vm.form = [
  	{type:'text',label:'First Name',id:'first_name'},
    {type:'select',label:'Marital Status',id:'marital_status',options:[
    	{id:'Single',name:'Single'},{id:'Married',name:'Married'}
    ]}
  ];
}