从角表保存数据

时间:2017-04-25 16:11:03

标签: angularjs html-table

我一直试图让我的代码将表中的所有组件保存到数据库中。我想如果我可以将添加到表中的每个元素保存到数组中,那么我可以将它发送到我的数据库,但我不知道这是不是最好的主意,也不知道我是否正确地做到了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

    <!-- Global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
    <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="assets/css/core.css" rel="stylesheet" type="text/css">
    <link href="assets/css/components.css" rel="stylesheet" type="text/css">
    <link href="assets/css/colors.css" rel="stylesheet" type="text/css">
    <!-- /global stylesheets -->

    <!--Local Stylesheets-->
    <link rel="stylesheet" href="css/style.css">
    <!--/local Stylesheets-->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script type="handsontable_basic.js"></script>

</head>

<body ng-controller="MainController">
    <div class="container">

        <div ng-app="productsTableApp" class="table-editable">
            <div ng-controller="ProductsController">
                <a href="#" ng-click="addRow()" class="table-add btn btn-sm btn-primary btn-success"><span class="glyphicon glyphicon-plus"></span> </a>
                <div class="table-responsive">
                    <table class="table">
                        <tr>
                            <th>Id</th>
                            <th>Fornecedor</th>
                            <th>Código do Produto</th>
                            <th>Deletar</th>
                        </tr>
                        <tr ng-repeat="dataum in data"">
                            <td contenteditable="true">
                                <input class="form-control" type="text" name="teste" ng-model="dataum.id" placeholder="Forneça o Id">
                            </td>
                            <td>
                            <input class="form-control" type="text" name="teste" ng-model="dataum.fornecedor" placeholder="Forneça o Fornecedor">
                            </td>
                            <td>
                                <input class="form-control" type="text" name="teste" ng-model="dataum.codProduto" placeholder="Forneça o Código do Pruduto"></td>
                                <td>
                                    <a href="#" data-ng-click="removeRow($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon glyphicon-trash"></span> </a>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <button id="export-btn" data-ng-click="exportTable" class="btn btn-primary">Exportar Dados</button>

                </div>
                <pre>{{data | json}}</pre>
            </div>
        </div>



    </body>
    </html>
    <script>
    angular.module('productsTableApp', [])
    .controller('ProductsController', function($scope){

        $scope.aux = 0;

        // Inicializando Array
        $scope.data=[
        {id: "001", fornecedor: "Larissa Fornecedor", codProduto: "431"},
        {id: "002", fornecedor: "Carlos Fornecedor", codProduto: "523"},
        {id: "003", fornecedor: "Rodrigo Fornecedor", codProduto: "123"}
        ];

        // Remove a linha selecionada pelo index
        $scope.removeRow = function(index){
            $scope.data.splice( index, 1);
        };

        //Adiciona uma linha no array
        $scope.addRow = function(){
          $scope.data.push({id: "", fornecedor: "", codProduto: ""})
        };

        //Envia o conteúdo da tabela para o servidor
        $scope.exportTable = function(){
            $scope.table[data];
            $scope.tabela.push()
        };

    });
</script>

0 个答案:

没有答案