为什么我的数据不会从我的表单中保存我更新的范围数据？

Question

我在模态中创建了一个表单，允许某人输入计划详细信息。然后我在 ng-model 属性中创建了范围表单，如下所示...

<form>
    <div class="form-group">
        <label>{{plans.title}}</label>
        <input type="text" name="title" ng-model="plans.title" class="form-control" placeholder="Enter Title" required />
    </div>
    <div class="form-group">
        <label>{{plans.overview}}</label>
        <textarea name="overview" ng-model="plans.overview" class="form-control" placeholder="Overview/Purpose" required />
    </div>
    <div class="form-group">
        <label>{{plans.notes}}</label>
        <textarea name="notes" ng-model="plans.notes" class="form-control" placeholder="Plan Notes" required />
    </div>
    <div class="form-group">
        <label>{{plans.visualplan}}</label>
        <div class="button" ngf-select ng-model="plans.visualplan" name="visualplan" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" >Upload Visual Plan</div>
    </div>
    <div class="form-group">
        <button type="submit" ng-click="submit()" Value="Post">Post</button>
    </div>
</form>

然后在我的代码中，我尝试将数据从表单中提取到我的范围 object 中，以获取标题、概述、注释和视觉计划下的计划。然后我对此进行了编码，将表单中的数据上传到我的 firebase json。然而，在提交详细信息后，上传到 json 的过程正常，但它正在上传我在 dailyplans.js 文件中初始设置的标题、概述、注释和视觉计划的默认值。我要上传的是我通过 ng-model 附加的详细信息，而不是初始设置值。谁能发现我做错了什么？

下面是我的js文件。

$scope.submit = function() {
    $scope.plans = {
        title: 'title',
        overview: 'overview',
        notes: 'notes',
        visualplan: 'visual plan'
    }
    if (authData) {
        ref.child('teaching-plans').child('teaching-plans' + authData.uid).set($scope.plans).then(function(authdata) {
            console.log('successful');
        }).catch(function(error) {
            console.log(error);
        });
    }
}

Answer 1

当用户点击提交时，您正在重置计划对象。理想情况下，它应该在 submit 方法之外。

你应该这样做

$scope.plans = {
    title: 'title',
    overview: 'overview',
    notes: 'notes',
    visualplan: 'visual plan'
}
$scope.submit = function(plans) {

    if (authData) {
        ref.child('teaching-plans').child('teaching-plans' + authData.uid).set(plans).then(function(authdata) {
            console.log('successful');
        }).catch(function(error) {
            console.log(error);
        });
    }
}

并将 html 更新为

<div class="form-group">
        <button type="submit" ng-click="submit(plans)" Value="Post">Post</button>
    </div>

希望对您有所帮助。

Answer 2

只是不要覆盖您的 plans 对象：

$scope.submit = function() {
    $scope.plans.title = 'title';
    $scope.plans.overview = 'overview';
    $scope.plans.notes = 'notes';
    $scope.plans.visualplan = 'visual plan;

    if (authData) {
        ref.child('teaching-plans').child('teaching-plans' + authData.uid).set($scope.plans).then(function(authdata) {
            console.log('successful');
        }).catch(function(error) {
            console.log(error);
        });
    }
}

这样 angular 可以正确触发侦听器。

为什么我的数据不会从我的表单中保存我更新的范围数据？

Why will my data not save my updated scope data from my form?

angularjs

firebase

angularjs-scope

angularfire

firebase-realtime-database