0

Tenho uma situação aqui.. preciso adicionar uma div com um cadastro quando o usuário clica num determinado botão. A página já inicia com a div. PS: Vi algumas respostas semelhantes mas não ajudou no meu caso.

Essa é a div que eu quero adicionar toda vez que o usuário clica no botão.

<div id="cadEquipInsp" class="col-md-6 ">
                <div class="panel panel-primary">
                    <div class="panel-heading">Cadastro de
                        Equipamentos/Instrumentos </div>

                    <div class="panel-body">
                        <form novalidate name="frmCliente" id="formCadastro" role="form">

                            <div class="row">

                                <div class="form-group col-md-12">
                                    <label>* Descrição:</label> <input name="inpDescricao"
                                        maxlength="60" required="required" type="text"
                                        class="form-control" ng-model="cliente.empresa" />
                                </div>
                                <div class="form-group col-md-6">
                                    <label>* Data da Inspeção:</label> <input
                                        name="inpDataEquipamento" maxlength="16" required="required"
                                        type="date" class="form-control" ng-model="cliente.cnpj" />
                                </div>
                                <div class="form-group col-md-6">
                                    <label>* Próxima Inspeção:</label> <input
                                        name="inpProximaInspecao" maxlength="60" required="required"
                                        type="date" class="form-control" ng-model="cliente.endereco" />
                                </div>

                                <div></div>
                            </div>
                        </form>
                        <div class="pull-right">
                            <button type="button" id="btnSalvar" class="btn btn-default"
                                ng-click="salvarClientes()">Salvar</button>

                            <!-- ou ng-disabled="frmCliente.inpNome.$invalid"  -->
                            <button type="button" class="btn btn-default"
                                ng-click="cancelarAlteracaoClientes(cli)">Cancelar
                                Edição</button>
                        </div>

                    </div>
                </div>
            </div> 

Esse é o botão.

<button type="button" id="btnAdCadEquipamento" class="btn btn-default">
                                <span class="glyphicon glyphicon-plus"></span></button>

Pode ser com Jquery, JS ou Angular

2
  • Você quer adicionar uma nova, ou apenas mostrar/ esconder? outro detalhe é seus inputs estão estranhos, onde o label é data da inspeção e o model é cliente.cnpj, isso tá certo? Commented 29/08/2017 às 18:56
  • Quero adicionar uma nova. Ta certo sim, ainda não está finalizado. Commented 29/08/2017 às 19:00

4 Respostas 4

1

Precisei de algo parecido e usei esse código como base. Veja se ajuda...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script language="javascript">
    var maximo = 5;
    (function($) {
        AddTableRow = function() {
            var qtd = $("#products-table tbody tr").length;
            if (qtd < maximo) {
                var newRow = $("<tr>");
                var cols = "";
                cols += '<td><input class="campo-dinamico" type="text"/></td>';
                cols += '<td>&nbsp;</td>';
                cols += '<td>&nbsp;</td>';
                cols += '<td>&nbsp;</td>';
                cols += '<td>';
                cols += '<button onclick="RemoveTableRow(this)" type="button">Remover</button>';
                cols += '</td>';
                newRow.append(cols);
                $("#products-table").append(newRow);
                resetId();
                return false;
            }
        };
    })(jQuery);
    (function($) {
        RemoveTableRow = function(item) {
            var tr = $(item).closest('tr');
            tr.fadeOut(0, function() {
                tr.remove();
                resetId();
            });
            return false;
        }
    })(jQuery); //renova os ids dos campos dinâmicos

    function resetId() {
        $('.campo-dinamico').each(function(i) {
            $(this).attr('id', 'campo-' + (i + 1)).val('campo-' + (i + 1));
        });
    }
</script>

<table id="products-table" border="1">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Código</th>
            <th>Quantidade</th>
            <th>Preço</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="campo-1" class="campo-dinamico" value="campo-1" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>
                <button onclick="RemoveTableRow()" type="button">Remover</button>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <button onclick="AddTableRow()" type="button">Adicionar Produto</button>
            </td>
        </tr>
    </tfoot>
</table>

0

Estou supondo que você deseja adicionar um novo equipamento toda vez que clicar em um botão, você poderia ter em sua controller do angular uma lista de equipamentos adicionados.

Ex:

 $scope.equipamentos = [];

E quando você clicar no botão você adicionaria um novo equipamento nesta lista

Ex:

   <-- HTML -->
    <button ng-click="addEquipamento()"></button>
    <--Controller Angular -->
    $scope.addEquipamento = function() {
        $scope.equipamentos.push({
            descricao : null,
            dataInspecao : null,
            dataProximaInspecao : null
        });
    }

Agora no seu html você poderia utilizar um ng-repeat renderizando seu form ex:

<div ng-repeat="equipamento in equipamentos">
    <label>Descricao</label>
    <input ng-model="equipamento.descricao/>
    [...] O resto dos seus inputs
    <button ng-click="salvarEquipamento(equipamento)> </button>
</div>

Toda vez que você adicionar um novo elemento ao array de equipamentos o ng-repeat renderizará todo o bloco abaixo da div do ng-repeat e você ainda terá a referencia do equipamento que quer editar, conforme exemplo.

0

A melhor forma em angular é usando templateUrl, quando necessário ele carrega o html desejado para ng-include, segue um exemplo...

Adicionando template plunker

0

var maximo = 3;
        (function($) {
            AddTableRow = function() {
                var qtd = $("#products-table tbody tr").length;
                if (qtd < maximo) {
                    var newRow = $("<tr>");
                    var cols = "";
                    cols += '<td><input class="campo-dinamico" type="file"></td>';
                    cols += '<td>';
                    cols += '<button onclick="RemoveTableRow(this)" type="button">Remover</button>';
                    cols += '</td>';
                    newRow.append(cols);
                    $("#products-table").append(newRow);
                    resetId();
                    return false;
                }
            };
        })(jQuery);
        (function($) {
            RemoveTableRow = function(item) {
                var tr = $(item).closest('tr');
                tr.fadeOut(0, function() {
                    tr.remove();
                    resetId();
                });
                return false;
            }
        })(jQuery); //renova os ids dos campos dinâmicos

        function resetId() {
            $('.campo-dinamico').each(function(i) {
                $(this).attr('id', 'campo-' + (i + 1)).val('campo-' + (i + 1));
            });

        }
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<table class="table table-hover" id="products-table">
                                    <thead>
                                        <tr>
                                            <th>Errata</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input class="campo-dinamico" type="file" id="campo-1" value="1" /></td>
                                            <td>
                                                <button onclick="RemoveTableRow()" type="button">Remover</button>
                                            </td>
                                        </tr>
                                    </tbody>

                                </table>
                                <div class="input-group mb-4" style="display: flex;justify-content: center; text-align: center;">
                                <button type="button" onclick="AddTableRow()" class="btn btn-primary"><i style="font-size: 15px;" class="bi bi-plus-square"> Nova Errata</i></button>
                            </div>

Tipo ele está dando um erro sempre que escolho um input do tipo file, alguém tem alguma ideia do que pode ser feito ?

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .