Angularjs 在引导模式中填写表单字段

Angularjs fill form fields in bootstrap modal

本文关键字:表单 字段 模式 Angularjs      更新时间:2023-09-26

我正在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">&times;</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"