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>

我不确定我尝试动态更新数据的方式是否正确。有人能说出来吗？

此外，我希望用户在提交表单后重定向到主页。我的方式是否正确？我的网址发生了变化，但视图并没有改变。

Answer 1

由于您想在控制器中使用$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

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

角度ng模型不更新模型

2 个答案: