Угловая ng-модель, не обновляющая модель

Question

Я начинаю работать над моим первым проектом Angular/Ionic. В принципе, у меня есть форма, которую я прошу пользователя заполнить и отправить. При нажатии кнопки «Отправить» я хочу, чтобы введенная информация была сделана в объект JS и сохранена в API. Но, независимо от того, что вводит пользователь, значения объекта отображаются как неопределенные.

Вот файлы.

appApi.js:

angular.module('myApp').factory('appApi', function() { 

    var data = [{ 
     "fName": "Subscription", 
     "desc": "Guitar Learning Session", 
     "selfExpiryDate": "3/20/2015", 
     "selfExpiryTime": "18:15" 
    }]; 

    var getData = function() { 
     return data; 
    } 

    var addData = function(newData) { 
     data[data.length] = newData; 
    } 

    return { 
     getFavors: getFavors, 
     addFavor: addFavor 
    }; 

}); 

controller.js:

.controller('formCtrl', ['$scope', '$state', 'appApi', function($scope, $state, appApi) { 
    $scope.newData = { 
     "fName": $scope.fNameForm, 
     "desc": $scope.descForm, 
     "selfExpiryDate": $scope.selfExpiryDateForm, 
     "selfExpiryTime": $scope.selfExpiryTimeForm 
    }; 

    $scope.submit = function() { 
     appApi.addData($scope.newData); 
     $state.go('app.home'); 
    } 
}]) 

и form.html:

<ion-view ng-controller = "formCtrl"> 
    <ion-content> 
     <div class = "list list-inset"> 
      <label class="item item-input"> 
       <input type="text" ng-model = "fNameForm" placeholder="Favor Name" autofocus> 
      </label> 
      <label class="item item-input"> 
       <input type="text" ng-model = "descForm" placeholder="Favor Description"> 
      </label> 
      <label class="item item-input"> 
       <input type="text" ng-model = "selfExpiryDateForm" placeholder="Favor Expiry Date"> 
      </label> 
      <label class="item item-input"> 
       <input type="text" ng-model = "selfExpiryTimeForm" placeholder="Expiry Time"> 
      </label> 
     </div> 

     <button class="button button-block button-positive" ng-click = "submit()"> 
      Submit 
     </button> 
    </ion-content> 
</ion-view> 

Я п Конечно, если я пытаюсь обновить данные динамически, это даже правильно. Может кто-нибудь сказать?

Кроме того, я хочу, чтобы пользователь был перенаправлен на домашнюю страницу после отправки формы. Я правильно сделал это? Мой url изменяется, но нет.

Answer 1

Поскольку вы хотите использовать $scope.newData в контроллере, то вы должны использовать этот объект для соответствующих ngModel «S:

<div class="list list-inset"> 
    <label class="item item-input"> 
     <input type="text" ng-model="newData.fName" placeholder="Favor Name" autofocus="" /> 
    </label> 
    <label class="item item-input"> 
     <input type="text" ng-model="newData.desc" placeholder="Favor Description" /> 
    </label> 
    <label class="item item-input"> 
     <input type="text" ng-model="newData.selfExpiryDate" placeholder="Favor Expiry Date" /> 
    </label> 
    <label class="item item-input"> 
     <input type="text" ng-model="newData.selfExpiryTime" placeholder="Expiry Time" /> 
    </label> 
</div> 

Демо:http://plnkr.co/edit/dQ7160A8BK99FfGMbzwS

Answer 2

По крайней мере, убедитесь, что ваша капитализация все соответствует:

http://plnkr.co/edit/Fvu3hb7R8srRh2ynPrGL?p=info

(function() { 
    'use strict'; 

    FormCtrl = function($scope, $state, AppApi) { 

    $scope.submit = function() { 
     AppApi.addData($scope.newData); 
     $state.go('app.home'); 
    }; 
}; 

AppApi = function() { 

    var data = [{ 
     "fName": "Subscription", 
     "desc": "Guitar Learning Session", 
     "selfExpiryDate": "3/20/2015", 
     "selfExpiryTime": "18:15" 
    }]; 

    var getData = function() { 
     return data; 
    }; 

    var addData = function(newData) { 
     data[data.length] = newData; 
    }; 

    return { 
     getFavors: getFavors, 
     addFavor: addFavor 
    }; 

}; 



    var myApp = angular.module('myApp'); 
    myApp.factory('AppApi', AppApi); 
    myApp.controller('FormCtrl', ['$scope', '$state', 'AppApi', FormCtrl]); 

})(); 

Поскольку у вас есть одно приложение, один контроллер и один завод - то, как вы загружаете все будет работать - когда вы попадаете в более чем один контроллер и фабрики и еще много чего (вам разрешено определять только одно приложение , то есть, так что вы не сделать один из моих новобранец ошибок)

больший пример вы можете увидеть работу здесь: http://plnkr.co/edit/wTIo8y6Det9Y5VLP86pM