Angularjs 在引导模式中填写表单字段
Angularjs fill form fields in bootstrap modal
我正在Angularjs中更改我的Thymeleaf代码,我有这个模式:
<div class="modal" id="addLicenseModal" ng-app="myApp">
<div class="modal-dialog" ng-controller="freeUserController">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">New license</h4>
</div>
<div class="modal-body">
<div ng-show='users.length > 0'>
<!-- <div th:if="${#lists.size(users)}!=0"> -->
<form id="addLicenseForm" role="form" action="#"
th:action="@{/administration/license}"
th:object="${clientLicenseForm}" method="post">
<!-- form start -->
<div class="box-body">
<div class="form-group" id=existingUser>
<label>Username</label> <select class="form-control select2"
style="width: 100%;" name="user" ng-model="selectedItem" ng-options="user.username for user in users">
</select>
</div>
<!-- <div class="form-group" id=existingUser>
<label>Username</label> <select class="form-control select2"
style="width: 100%;" th:field="*{user}">
<option th:each="user: ${users}" th:value="${user.username}"
th:text="${user.username}"></option>
</select>
</div> -->
<div class="form-group">
<label>Date and time range</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control pull-right active"
id="reservationtime"> <input type="hidden"
name="startDate" id="selectedStartDate"> <input
type="hidden" name="endDate" id="selectedEndDate">
</div>
<!-- /.input group -->
</div>
<div class="form-group">
<label>Execution number</label><span id="errmsg"
style="float: right; color: red"></span> <input
th:field="*{counter}" id="executionNumber" type="number"
class="form-control" placeholder="executionNumber">
</div>
<div class="form-group">
<label>MAC address</label> <input id="macAddress" type="text"
class="form-control" th:field="*{macAddress}" maxlength="25"
placeholder="MAC address">
</div>
<div class="form-group">
<label>CPU ID</label> <input id="cpuId" type="text"
class="form-control" th:field="*{cpuId}" maxlength="25"
placeholder="CPU ID">
</div>
</div>
</form>
</div>
<p ng-show="users.length == 0">All clients have the own
license, you can update a license with UPDATE button.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button ng-show='users.length > 0' id="createLicenseButton"
type="button" class="btn btn-primary">Create license</button>
<button ng-show='users.length == 0' id="createLicenseButton"
type="button" class="btn btn-primary" disabled>Create
license</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
目前只有选择字段在 Angular 中,我无法在 name="user" 中存储正确的信息,例如它存储对象:7 而不是用户名。从弹簧控制器我有
@Override
@RequestMapping(value = { "/license" }, method = RequestMethod.GET)
public String license(Model model){
try{
model.addAttribute("licenses", administrationService.getClientLicense());
model.addAttribute("clientLicenseForm", new ClientLicenseForm());
model.addAttribute("error", false);
}catch(Exception e){
LOG.error("Threw exception in AdministrationControllerImpl::license : " + ErrorExceptionBuilder.buildErrorResponse(e));
model.addAttribute("error",true);
}
return "license";
}
我的javascript代码有这样的选择说明:
var app = angular.module('myApp',[]);
app.controller('freeUserController', function($scope, $http) {
$http({
method: 'GET',
url: 'users'
}).then(function successCallback(response) {
$scope.users = response.data.result;
$scope.selectedItem = $scope.users[0].username;
// 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.
});
});
选择字段中的错误在哪里? 是否可以在 Angularjs 中制作所有内容?谢谢
更新:我用select as
但角度将值设置为字符串:卢卡,而不仅仅是卢卡
我已经解决了阅读官方文档并使用以下代码的问题:
ng-options="user.username as user.username for user in users track by user.username"
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 添加和删除隐藏字段数组中的值,而不提交表单
- 单击鼠标,用MySQL数据填充html表单输入字段
- 带有条件字段的PHP表单
- 验证PDF表单中的字段
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 在表单中的输入字段上提交事件
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 表单输入字段随着溢出的文本而增长
- 如何将onChange方法添加到ExtJS 4表单中的所有字段(textField)中
- 尝试使用名称访问表中字段的日期选取器时出现问题
- Javascript 表单 - 字段不是必需的
- 单击按钮时更改数据库表的字段值
- 数据表将字段值关联到按钮,而 ajax 填充表
- 返回数据表输入字段
- 更改附加表行字段jQuery的名称
- Angularjs表单/字段验证使用JavaScript函数,无需指令
- 仅在Firefox中,表脱离字段集边界
- 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$_POST数组中的值
- 什么's提交表单后,从post数组中动态附加的表行字段中获取值的问题