Angular表单绑定到作用域的麻烦

Angular Form Trouble Binding to Scope

本文关键字:麻烦 作用域 表单 绑定 Angular      更新时间:2023-09-26

我有一个简单的Angular表单,包含一个文本框和一些隐藏字段。这个表单在我的页面上被重复使用了很多次。

<form accept-charset="UTF-8" name="form.jobAppForm" class="pitch-form" novalidate>
    <div style="display:none;">
        <input name="authenticity_token" type="hidden" ng-value="window._token">
        <input name="user_id" type="hidden" ng-value="<%= current_user.id %>">
        <input name="job_description_id" type="hidden" ng-value="j.id">
        <input name="company_id" type="hidden" ng-value="j.company_id">
    </div>
    <div class="form-group">
        <textarea class="apply-textbox" id="pitch" name="pitch" ng-model="jobApp.pitch"></textarea>
    </div>
    <input class="apply-submit-btn" name="commit" type="submit" value="Submit Application" ng-click="createApplication(jobApp)" onClick="this.disabled=true;this.value='Sending…';">
</form>

在我的控制器中,我有一个初始化$scope.jobAppnewApplication方法,然后有一个向服务器发送post请求的createApplication方法。如果我在调用createApplication时记录$scope.jobApp的值,则所有属性仍然设置为null。似乎只有pitch属性被绑定。如果我输入一个pitch,它被绑定到作用域,但没有其他。我不确定我错过了什么。为什么是pitch绑定,但没有其他属性?这是我的控制器方法。

$scope.newApplication = function() {
    console.log('new app')
    $scope.form = {}
    $scope.jobApp = {
        token: null,
        user_id: null,
        job_description_id: null,
        company_id: null,
        pitch: null
    };
};
$scope.createApplication = function() {
    var jobAttributes = $scope.jobApp;
    console.log(jobAttributes)
    if ($scope.form.jobForm.$valid) {
        $http({
            method: 'POST',
            url: '/applications',
            data: jobAttributes,
            headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json, text/plain, */*'}
        }).success(function(data, status){
            console.log('success');
        }, function(err){
            alert("Failed to save job! Server responded with: " + err)
        });
    };
}

注意:我已经尝试设置ng-model="jobApp.attribute"的其他属性,以及使用value=而不是ng-value=没有效果。

与@HaukurHaf一样,您需要在表单字段上使用ng-model。

<form accept-charset="UTF-8" name="form.jobAppForm" class="pitch-form" novalidate>
<div style="display:none;">
    <input name="authenticity_token" type="hidden" ng-model="jobApp.token">
    <input name="user_id" type="hidden" ng-model="jobApp.user_id">
    <input name="job_description_id" type="hidden" ng-model="jobApp.job_description_id">
    <input name="company_id" type="hidden" ng-model="jobApp.company_id">
</div>
<div class="form-group">
    <textarea class="apply-textbox" id="pitch" name="pitch" ng-model="jobApp.pitch"></textarea>
</div>
<input class="apply-submit-btn" name="commit" type="submit" value="Submit Application" ng-click="createApplication(jobApp)" onClick="this.disabled=true;this.value='Sending…';">