Ionic / AngularJS：当提交表单时，本地数据显示为空白

Question

我试图将数据从一个模式中保存到本地存储中。但是，出于某种原因，数据空白。

例如，当我获取数据时，它返回：

,,,,,,

而不是：

姓名，电子邮件，年份，专业，电话号码

所以，好像它正在保存一个空白条目。我对AngularJS很新，所以我无法弄清楚如何修复它。如果有人能帮助我，这将是惊人的！

的 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

获得此功能的关键之一是将所有表单输入ng-model移至指向this answer建议的object.property。

基本上这意味着您需要为 HTML 输入执行以下操作：

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

并将其放入控制器：

$scope.info = {};

由于ngModel，您需要更改$scope.addTodo功能。在您使用时，您还可以通过添加$scope.info = {};来重置提交中的表单数据。

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

您也可以将其从ModalCtrl移至AppController，因为您不再需要ModalCtrl。

模态范围

将scope: $scope添加到您的模式中，以便它使用AppController中的范围。

像这样：

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

删除

从HTML中删除ModalCtrl控制器和ng-controller="ModalCtrl"。

在 services.js 中删除此项（不需要）：

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

storageService

更改

在getLocalStorage工厂中，将此var todoList = {}更改为此var todoList = []，因为您需要一个对象数组，因此您需要从数组开始。

在您的模态HTML中将<ion-content has-header="true">更改为<ion-content class="has-header"> suggested by Ionic。