0

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>
0

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

2 Comments

This works perfectly! Thank you so much! I've been trying to figure this out for days. One more question: how would I add an edit function? I have some idea but I'm not sure how to actually do it in code.
Try this Plunker. I put a few comments in the controller to show what was changed. Let me know if you have any questions. Thanks!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.