Преобразование @ElementCollection в @ManyToMany CRUD Операции над формой, имеющей тег Select, который заполняет раскрывающийся список из другой формы - PullRequest
Новая
       29

Преобразование @ElementCollection в @ManyToMany CRUD Операции над формой, имеющей тег Select, который заполняет раскрывающийся список из другой формы

0 голосов
/ 14 июня 2019

У меня уже есть основные CRUD-операции, выполняющиеся с использованием AngularJS и Spring Boot App. Я использовал методы $ http GET, POST, DELETE, PUT и соответствующие конечные точки API REST для вызова контроллеров Java. Все работало нормально. Но в моем проекте мы также должны добавить опции к опциям тега Select. Итак, чтобы получить параметры в теге Select, я создал другой класс модели для этой переменной Select. И создал одну форму для добавления параметров в выпадающий список этой формы выбора. Это также работало нормально. Опции добавлялись в выпадающий список оригинальной формы.

Но, когда я отправил форму с выбранным параметром, все поля отправляются, кроме этого поля выбора. Поле выбора сохраняется как пустой массив.

Я попытался использовать оба метода, такие как ng-options в теге Select и ng-repeat в теге option. Кажется, ничего не работает. 

app.js File:    

var app = angular.module("productManager", []);
app.controller("productController", function($scope, $http){

    // Table Variables using products Object of Product.
    $scope.products = [];
    $scope.confirmDelete = false;

    // Input for TextBox Variables.
    $scope.productForm = {
        id : -1,
        proName : "",
        brands : "",
        madeIn : "",
        price : ""
    };




    // For Brand.
    $scope.brands = [];
    $scope.brandForm = {
            brandName : "",
    };
    $scope.submitBrand = function() {
        $http({
            method : "POST",
            url : '/brands/addBrand',
            data : angular.toJson($scope.brandForm),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(_successBrand, _errorBrand);
    };
    function _successBrand(response) {
        _refreshBrandData();
        _clearBrandFormData();
    };
    function _errorBrand(response) {
        console.log("Error : " + response.statusText + ":" + response.data);
    };
    function _refreshBrandData(){
        $http({
            method : "GET",
            url : '/brands/getAllBrands'
        }).then(function success(response){// success
            $scope.brands = response.data;
        }, function error(response){// Error
            console.log("Error : " + response.status + ":" + response.data);
        });
    }
    function _clearBrandFormData() {
        $scope.brandForm.brandName = "";
    };




    // FUnction to GET all Data from Database.
    _refreshProductData();

    // For GET: To Get All Data.
    function _refreshProductData(){
        $http({
            method : "GET",
            url : '/products/getAllProducts'
        }).then(function success(response){// success
            $scope.products = response.data;
        }, function error(response){// Error
            console.log("Error : " + response.status + ":" + response.data);
        });
        _refreshBrandData();
    }

    // For POST and PUT: Submit Button.
    $scope.submitProduct = function(){

        var method = "";
        var url = "";
        if ($scope.productForm.id == -1) {
            method = "POST";
            url = '/products/addProduct';
        } else {
            method = "PUT";
            url = '/products/updateProduct';
        }

        $http({
            method : method,
            url : url,
            data : angular.toJson($scope.productForm),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(_success, _error);
    };


    // Create New Product Button
    $scope.createNewProduct = function() {
        _clearFormData();
    };


    // Delete Product Button
    $scope.deleteProduct = function(product) {
        $http({
            method : "DELETE",
            url : '/products/deleteProduct/' + product.id
        }).then(_success, _error);
    };


    // Edit Product Button
    $scope.editProduct = function(product) {
        $scope.productForm.proName = product.proName;
        $scope.productForm.brands = product.brands;
        $scope.productForm.madeIn = product.madeIn;
        $scope.productForm.price = product.price;
        $scope.productForm.id = product.id;
    };

    // Success Function
    function _success(response) {
        _refreshProductData();
        _clearFormData();
    };

    // Error Function
    function _error(response) {
        console.log("Error : " + response.statusText + ":" + response.data);
    };

    // Clear Form Data
    function _clearFormData() {
        $scope.productForm.id = -1;
        $scope.productForm.proName = "";
        $scope.productForm.brands = "";
        $scope.productForm.madeIn = "";
        $scope.productForm.price = "";
    };
});






***************************








index.html File:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Product Catalogue</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script th:src = "@{/js/app.js}"></script>
</head>

<body ng-app = "productManager" ng-controller = "productController">
    <div align = "center">
        {{myOrderBy}}
        <h4>Product Manager : </h4>
        <form ng-submit = "submitProduct()">
            <table border = "0" cellpadding = "10">
                <tr>
                    <td>Product Id :</td>
                    <td>{{productForm.id}}</td>
                </tr>
                <tr>
                    <td>Product Name :</td>
                    <td><input type = "text" ng-model = "productForm.proName"/></td>                    
                </tr>
                <tr>
                    <td>Select a Brand :</td>{{ productForm.brands.brandName }} {{ productForm.brands }}
                    <td><select ng-model = "productForm.brands" ng-options = "x.brandName for x in brands"></td>
                </tr>
<!--                 <tr> -->
<!--                     <td>Select a Brand :</td>{{ productForm.brands }} -->
<!--                     <td><select ng-model = "productForm.brands"> -->
<!--                            <option ng-repeat = "x in brands" value = "{{x.brandName}}">{{ x.brandName }}</option> -->
<!--                     </td> -->
<!--                 </tr> -->
                <tr>
                    <td>Made In :</td>
                    <td><input type = "text" ng-model = "productForm.madeIn" /></td>
                </tr>
                <tr>
                    <td>Price :</td>
                    <td><input type = "text" ng-model = "productForm.price" /></td>
                </tr>
                <tr>
                    <td colspan = "2"><input type = "submit" value = "Submit" /></td>
                </tr>
            </table>
        </form>
        <button ng-click = "createNewProduct()">Create New Product</button>
    </div>



    <div align = "center">
        <h2>Add Brand : </h2>
        <form ng-submit = "submitBrand()">
            <table border= "0" cellpadding = "10">
                <tr>
                    <td>Enter Name of Brand : </td>
                    <td><input type = "text" ng-model = "brandForm.brandName" /></td>
                </tr>
                <tr>
                    <td colspan = "2"><input type = "submit" value = "submit" /></td>
                </tr>
            </table>
        </form>
    </div>



    <div align = "center">
        <h1>Product Catalogue : </h1>
        <br/>
        <input ng-model="searchByAny" ng-click = "resetSearchBy()" type="text" placeholder = "Enter Any" />
        <table border = "1" cellpadding = "10">
            <thead>
                <tr>
                    <td><input ng-model="searchBy.id" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Id" /></td>
                    <td><input ng-model="searchBy.proName" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Name" /></td>
                    <td><input ng-model="searchBy.brands" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Brand" /></td>
                    <td><input ng-model="searchBy.madeIn" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Made In" /></td>
                    <td><input ng-model="searchBy.price" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Price" /></td>
                </tr>
                <tr>
                    <th ng-click = "customOrderBy('id')">Product Id ??</th>
                    <th ng-click = "customOrderBy('proName')">Name ??</th>
                    <th ng-click = "customOrderBy('brands')">Brand ??</th>
                    <th ng-click = "customOrderBy('madeIn')">Made In ??</th>
                    <th ng-click = "customOrderBy('price')">Price ??</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat = "product in products>
                    <td>{{ product.id }}</td>
                    <td>{{ product.proName }}</td>
                    <td>{{ product.brands }}</td>
                    <td>{{ product.madeIn }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                                <button ng-click = "editProduct(product)">Edit</button>
                                &nbsp;
                                <button ng-click = "deleteProduct(product)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Ожидается: когда я публикую первую форму, все поля должны быть отправлены.

Факт: Когда я публикую первую форму, все поля отправляются, кроме поля тега.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...