Question

我有一个带有文本框和一些隐藏字段的简单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>

在我的控制器中，我有一个newApplication方法初始化$scope.jobApp，然后是一个createApplication方法，它向服务器发送一个帖子请求。如果在调用$scope.jobApp时记录createApplication的值，则所有属性仍设置为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=无效。

Answer 1

与@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…';">

Angular Form麻烦绑定到范围

1 个答案: