Angularjs 两个表单用于同一个控制器
Angularjs two form for the same controller
我对angularjs代码有问题。我有一个角色选择以两种模式复制:创建用户和更改角色。此选择以这种方式填充 http 调用:
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newUser.role" required>
<ui-select-match placeholder="Select role">
{{$select.selected.role}}
</ui-select-match>
<ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span>
</ui-select-choices>
</ui-select>
在角度我有:
$http({
method: 'GET',
url: 'roles'
}).then(function successCallback(response) {
$scope.roles = response.data.result;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
所以我把HTML代码放在两种模式的形式中。在第一个中创建用户,一切正常,在第二个中我不能使用不同的 data-ng-model,否则我会收到未定义的元素。例如,我有这个:
<form novalidate class="simple-form" name="newRoleForm">
<!-- form start -->
<div class="box-body">
<div class="form-group">
<label>New role</label>
<!-- <ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newRole.role" required> <ui-select-match
placeholder="Select new role">
{{$select.selected.role}}</ui-select-match> <ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select> -->
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newUser.role" required> <ui-select-match
placeholder="Select role">
{{$select.selected.role}}</ui-select-match> <ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
如果我使用注释代码,我在javascript中没有收到角色值,如果我使用未注释的代码,它可以工作,因为newUser在另一种模式中使用。我可以使用这个实际的代码,但我想了解它为什么有效以及另一个没有。此外,当我打开第二个模态时,我看到第一个模态中设置的值。你知道为什么吗?
获得完美的概述有点棘手,但我想我会尝试回答您的几个问题:
-
为什么
newRole.role
不起作用,而newUser.role
却不起作用?基本上,据我所知,您自己回答了这个问题。在开始将属性绑定到对象之前,您需要在作用域中的某个位置定义该对象。即控制器中的简单
$scope.newRole = {}
可能会修复此错误。
第一个模态 的值是在第二个模态中设置的?
我不确定这一点,因为我看不到第二种模态(?但是,如果在同一作用域中重用相同的代码,则会将数据绑定到同一个 newUser 对象。因此每次都获得相同的值。
我希望这在某种程度上有所帮助
相关文章:
- jQuery表单添加不适用于下拉列表
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- Mailchimp内联表单验证不适用于JS加载的HTML
- 需要一个用于AJAX的Javascript库,其中包含多部分/表单数据
- 如何将javascript仅应用于1个表单中的2个表单提交按钮中的1个
- 表单中用于特定字段的滚动条
- asp.net mvc中的javascript验证不适用于登录表单
- 通过 AJAX 发送表单,HTML 节点选择用于数据发送
- 通用 jQuery,用于在 HTML5 验证后禁用所有表单上的提交按钮
- JavaScript 表单验证不适用于所有 HTML 字段
- JavaScript函数不适用于我的HTML表单
- jQuery .submit() 不适用于 javascript 生成的 html 表单
- 用于处理表单的Handlerbars模板
- 缺少用于创建的模板.内部服务器错误-聚合物表单保存到数据库
- 临时存储用户表单数据的最佳方式,用于表单重新提交
- Angularjs 两个表单用于同一个控制器
- 一个源表单用于所有页面
- 动态CRM表单:用于虚拟的jScript
- Javascript内的PHP注册表单(用于验证)