Add a div by clicking the button

Question

I have a situation here.. I need to add a div with a registration when the user clicks on a particular button. The page starts with the div. PS: I saw some similar answers but it didn’t help my case.

This is the div I want to add every time the user clicks the button.

<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> 

This is the button.

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

Can be with Jquery, JS or Angular

Answer 1

I needed something similar and used this code as a base. See if it helps...

<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>

Answer 2

The best angular shape is using templateUrl, when necessary it carries the html desired to ng-include, follows an example...

Adding plunker template

Answer 3

I’m guessing you want to add a new outfit every time you click a button, you could have in your angular controller a list of added equipments.

Ex:

 $scope.equipamentos = [];

And when you click the button you would add a new outfit to this list

Ex:

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

Now in your html you could use an ng-repeat rendering your 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>

Every time you add a new element to the equipment array ng-repeat will render the entire block below the ng-repeat div and you will still have the reference of the equipment you want to edit, as an example.