Angular表单绑定到作用域的麻烦
Angular Form Trouble Binding to Scope
我有一个简单的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.jobApp
的newApplication
方法,然后有一个向服务器发送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…';">
相关文章:
- 监视函数从服务返回不起作用,但作用域函数起作用
- 将作用域存储在JSON中
- 从控制器继承了隔离的作用域以生成可重用的指令
- 从ng模板访问作用域
- 调用私有作用域
- 对父作用域的指令更新延迟了一步
- 正在$rootScope上达到控制器作用域$在内部控制器上
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 这两个关于 JavaScript 作用域链的例子有什么区别?
- 在具有命名作用域的自定义Polymer元素中隐藏表行
- AngularJS指令隔离作用域
- Angularjs:修改js中的作用域,稍后在页面中使用
- 访问多个指令的隔离作用域
- Javascript作用域和Ajax调用;工作不正常
- 向Angular作用域对象添加对象数组——TypeError
- ng重复中的ng模型-初始化唯一作用域属性
- 在put方法之前从作用域获取数据
- 如何在html中以角度显示自定义指令的作用域
- 当提供函数名称时,检查函数是否存在于同一作用域中
- Angular表单绑定到作用域的麻烦