Question

我第一次在使用Bootstrap和Thymeleaf的项目中使用Angular。我必须替换这个百万富翁代码

<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="box-body" ng-app="myApp">
    <div ng-controller="freeUserController" class="form-group"
        id=existingUser>
        <label>Username</label> <select class="form-control select2"
            style="width: 100%;" name="user">
            <option ng-repeat="user in users" value="{{user.username}}">
                {{user.username}}</option>
        </select>
    </div>

并在我的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;
        // 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.
    });
});


$(function() {
    $("#createLicenseButton").click(
            function() {
                var form = $("#addLicenseForm");        
                $.ajax({
                    type : "POST",
                    url : form.attr("action"),
                    data : form.serialize(),
                    // all right with rest call
                    success : function(data) {  
                        //No exception occurred
                        if (data.status==true){ 
                            //Also the field are right(for e.g. form value)
                            if(data.success==true){
                                //il risultato sta in data.result
                                //window.location.reload(true);
                                location.reload();
                                //reload only the tag with id carsTable, so only the table
                                //$('#carsTable').load(document.URL +  ' #carsTable');
                                $('#addLicenseModal').modal("hide");
                                notifyMessage("Your license has been created!", 'success');
                            }
                            else{
                                //code if there are some error into form for example
                            }
                        } else {
                            //code exception
                            $('#addLicenseModal').modal("hide");
                            notifyMessage("Error! Your license hasn't been created!", 'error');
                        }
                    },
                    //error during rest call
                    error : function(data) {
                        window.location.href = "/ATS/500";
                    }
                });
            });
});

但我有一些问题：

当我在select字段中只有一个元素并且用户选择时它，这不是在现场展示，但它以我的形式保存变量
使用thymeleaf默认选择一个元素，现在如何设置一个防御元素（任何一个）
如果单击模态或成功调用ajax，如何调用angular http调用？

使用select2插件调用Angular Web服务

0 个答案: