Displaying Data

ionic-v1
1

I am taking information from my database and trying to figure the best way to display it within the app.

This is my database info

 [{"form_input_id":"1","form_id":"6","title":"Please enter your room number?","input_type":"text","identifer":"room","choices":"s:0:\"\";","heading":"Valet Request"},{"form_input_id":"2","form_id":"6","title":"Please enter any comments or feedback.","input_type":"textarea","identifer":"feedback","choices":"s:0:\"\";","heading":"Valet Request"},{"form_input_id":"3","form_id":"6","title":"Please choose office","input_type":"select","identifer":"office","choices":"s:19:\"Sales, Reservations\";","heading":"Valet Request"},{"form_input_id":"18","form_id":"6","title":"Last Name","input_type":"text","identifer":"Last_Name","choices":"s:0:\"\";","heading":"Valet Request"},{"form_input_id":"19","form_id":"6","title":"Type of Car","input_type":"select","identifer":"Car_type",**"choices":"s:20:\"Buick, Olds, Ferrari\";"**,"heading":"Valet Request"}]

I am able to pull everything the way I want to except choices. I am trying to create dynamic forms and need to create a select showing the choices.

My current controller:

.controller('FormCtrl', function($scope, $ionicLoading){

// Grab Form
var form = angular.fromJson(window.localStorage.getItem('form'));

// Set Title
$scope.title    = form[0].heading;

// Send Form Data
$scope.forms    = form;

})

And my View:

<ion-view title="Form" hide-nav-bar="true">
<ion-header-bar align-title="left" class="bar-dark">
    <div class="buttons">
        <a href="#/lobby" class="button button-dark">Cancel</a>
    </div>
</ion-header-bar>
<ion-content id="dynamic" scroll="true" padding="true">
        <h2 class="text-center">{{title}}</h2>
        <form>
            <div ng-repeat="form in forms">
                <label>{{form.title}}</label>
                <div ng-if="form.input_type == 'text'">
                    <input type="text" name="{{form.identifier}}" />
                </div>
                <div ng-if="form.input_type == 'time'">
                    <input type="time" name="{{form.identifier}}" />
                </div>
                <div ng-if="form.input_type == 'textarea'">
                    <textarea name="{{form.identifier}}"></textarea>
                </div>
                <div ng-if="form.input_type == 'select'">
                    <select name="{{form.identifier}}">
                              NEED TO FIGURE HOW TO DISPLAY CHOICES AS OPTIONS
                    </select>
                </div>
            </div>
        </form>
</ion-content>
2

transform your choices in an array like splitting at ‘,’ and remove not necessary chars.

after that you cn use ng-options:
https://docs.angularjs.org/api/ng/directive/ngOptions

or simply a ng-repeat on an option-tag, where you need to set the value on your own.