Ionic/AngularJS: local data is showing up blank when form is submited

Question

I'm trying to save the data from a form, which is in a modal, to local storage. But, for some reason, the data is coming up blank.

For example, when I get the data, it returns this:

, , , , ,

instead of this:

Name, Email, Year, Major, Phone#

So, it seems like it is saving a blank entry. I'm very new to AngularJS so I can't figure out how to fix it. If anyone could help me out that would be amazing!

controllers.js

angular.module('starter.controllers', [])

.controller('AppController',['$scope', 'getLocalStorage', '$ionicModal', function ($scope, getLocalStorage, $ionicModal) {
    $scope.todos = getLocalStorage.getTodos();

    $scope.clearSelected = function () {
        $scope.todos = $scope.todos.filter(function (item) {
            return !item.selected;
        });
        getLocalStorage.updateTodos($scope.todos);

    };

    $ionicModal.fromTemplateUrl('modal.html', function(modal) {
        $scope.modal = modal;
      }, {
        animation: 'slide-in-up',
        focusFirstInput: true
      });
}])

.controller('ModalCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {

  $scope.todos = getLocalStorage.getTodos();

  $scope.addTodo = function () {
      $scope.todos.push(
        {'name': $scope.name,
         'email': $scope.email,
         'year': $scope.year,
         'major': $scope.major,
         'phone': $scope.phone,
         'selected': false});
      $scope.modal.hide();
      getLocalStorage.updateTodos($scope.todos);
  };
}])

.controller('InfoCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
    $scope.todos = getLocalStorage.getTodos();
}
]);

services.js

angular.module('starter.services', [])

var storageService = angular.module('storageService', []);

storageService.factory('getLocalStorage', function () {

    var todoList = {};

    return {
            list: todoList,

        updateTodos: function (todosArr) {
            if (window.localStorage && todosArr) {
                localStorage.setItem("todos", angular.toJson(todosArr));
            }
            //update the cached version
            todoList = todosArr;
        },

        getTodos: function () {
            todoList = angular.fromJson( localStorage.getItem("todos") );
            return todoList ? todoList : [];
        }
    };

})

html

<ion-view view-title="TechProf">
  <ion-content>
  <button class="button button-full button-positive" ng-click="modal.show()">OPen Modal</button>

      <ion-list>
          <h3>List</h3>
        <ul class="list">
           <li ng-repeat="s in todos" class="item">
               <input ng-model="s.selected" type="checkbox" />
               <span ng-class="{'selected': todo.selected}">{{ s.name }}, {{ s.email }}, {{ s.year }},{{ s.major }}, {{ s.phone }}</span>
           </li>
        </ul>
        <button class="button button-full button-positive" ng-click="clearSelected()">Delete Selected</button>
    </ion-list>
  </ion-content>
  <script id="modal.html" type="text/ng-template">
        <div class="modal" ng-controller="ModalCtrl">
          <header class="bar bar-header bar-positive">
            <h1 class="title">New Contact</h1>
            <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
          </header>
          <ion-content has-header="true">
          <form name="frm" ng-submit="addTodo()">
          <div class="list">
            <label class="item item-input">
              <input type="text" placeholder="Name" ng-model="name" required>
            </label>
            <label class="item item-input">
              <input type="email" placeholder="Email" ng-model="email" required>
            </label>
            <label class="item item-input item-select">
            <div class="input-label">Year</div>
            <select ng-model="year" required>
              <option selected>Freshman</option>
              <option >Sophmore</option>
              <option>Junior</option>
              <option>Senior</option>
            </select>
            </label>
            <label class="item item-input">
              <input type="text" placeholder="Major" ng-model="major" required>
            </label>
            <label class="item item-input">
              <input type="number" placeholder="Phone" ng-model="phone" ng-minlength="10" required>
            </label>
            <button class="button button-full button-positive" ng-disabled="frm.$invaild">Submit</button>
            </div>
          </form>
          </ion-content>
        </div>
      </script>
</ion-view>

Answer 1

Working Plunker

ngModel

One of the keys to getting this is move all of the form inputs ng-model point to an object.property like this answer suggests.

Basically that means you need to do something like this for your HTML inputs:

<input type="text" ng-model="info.name">

And put this in your controller:

$scope.info = {};

Because of the ngModel you'll need to change the $scope.addTodo function. While you're at it you can also reset the form data on submit by adding $scope.info = {};.

$scope.addTodo = function() {
    $scope.todos.push($scope.info);
    $scope.modal.hide();
    getLocalStorage.updateTodos($scope.todos);
    $scope.info = {};
};

You can also move it from ModalCtrl to your AppController because you won't need the ModalCtrl anymore.

Modal Scope

Add scope: $scope to your modal so it uses the scope from your AppController.

Like this:

$ionicModal.fromTemplateUrl('modal.html', function(modal) {
    $scope.modal = modal;
}, {
    scope: $scope,
    animation: 'slide-in-up',
    focusFirstInput: true
});

Remove

Remove the ModalCtrl controller and the ng-controller="ModalCtrl" from your HTML.

In services.js remove this (it's unnecessary):

var storageService = angular.module('storageService', []);

storageService

Change

In your getLocalStorage factory, change this var todoList = {} to this var todoList = [] because you want an array of objects so you need to start with an array.

In your modal's HTML change <ion-content has-header="true"> to <ion-content class="has-header"> as suggested by Ionic.