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

66
9

Я начинаю работать над моим первым проектом 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 изменяется, но нет.

спросил(а) 2021-01-19T19:46:21+03:00 9 месяцев, 1 неделя назад
1
Решение
111

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

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]);

})();

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

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

ответил(а) 2021-01-19T19:46:21+03:00 9 месяцев, 1 неделя назад
46

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

<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

ответил(а) 2021-01-19T19:46:21+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема