1

Olá, Sou iniciante com AngularJS.

Para inserir e excluir novos campos esta tudo ok, veja o fiddle: http://jsfiddle.net/zbdvke2w/4/

Acontece que preciso que ao carregar a pagina não exista todo o conteudo que tem dentro da div jumbotron no DOM

<div class="jumbotron">
      <button style="float:right " type="button" class="btn btn-danger" ng-click="removerIcms(icms)">x</button>
      <label for="ex2">Regime</label>
      <select class="form-control" ng-model="icms.regime" ng-options="r.regime for r in data">
        <option value="">Selecione o Regime</option>
      </select>
      <label for="ex2" ng-show="icms.regime">Situação Tributária
        <select class="form-control" ng-show="icms.regime" ng-model="icms.situacao" ng-options="s.situacao for s in icms.regime.SituacaoTributaria">
          <option value="">Selecione a Situação Tributária</option>
        </select>
      </label>
      <label for="ex2" ng-show="icms.regime">Origem
        <select class="form-control" ng-model="icms.Origem" ng-options="o.Origem for o in icms.regime.Origens">
          <option value="">Selecione a Origem do Produto</option>
        </select>
      </label>
    </div>

Como faço para inserir o conteúdo apenas depois de clicar? Isso já esta funcionando, mas preciso que ao carregar a tela tenha apenas o botão incluir e não esteja nenhuma vez carregado o conteudo da div jumbotron.

3 Respostas 3

1

Você poderia fazer isso de várias maneiras. Acredito que a mais simples seria a forma como o @Johnny Gabriel citou: criar uma variável de controle e alterar ela.

No seu codigo do JSFiddle, é possível ver que você adicionou um elemento dentro do vetor inicial $scope.ICMSs = [{}];

Para que nao exista nenhum elemento, você pode deixar esse vetor vazio.
$scope.ICMSs = [];

Assim só haverá o botão de incluir.

4
  • +1 pela boa resposta, a minha resposta é uma alternativa mais ganbiarrosa, kkkk. Commented 6/05/2016 às 12:40
  • hahaha um mal que chega pra todos. Valeu pelo feedback Commented 6/05/2016 às 12:41
  • 1
    @GabrielCâmara, perfeito, muito Obrigada
    – Gih
    Commented 6/05/2016 às 14:47
  • Disponha! Que bom que ajudou! :D Commented 6/05/2016 às 19:58
0

Uma forma simples de fazer isso é removendo o primeiro, usando seu método de remoção dentro de um método init() dentro do seu controller:

 $scope.init = function(el) {
     $scope.removerIcms(el);
  }
 $scope.init(0);

Aqui o exemplo funcionando.

Outra maneira, seria criar no seu objeto mais um parâmetro chamado status. E trazer somente aqueles que estiverem com o status true. no ng-if="icms.status == true", e na ação do botão ng-click você chamaria uma ação sequencial, mudando o status dos elementos da lista do seu array / objeto.

4
  • Ivan, poderia me tirar uma duvida? A diretiva ngIf remove o elemento do DOM, correto? Se o valor da variável for alterada pra true, o elemento é adicionado dinamicamente no DOM de novo? Commented 6/05/2016 às 12:37
  • 1
    @GabrielCâmara, exatamente e eu achei isso incrível, ja que pode ter o conteudo no html facilitando a programação e só aparecer no DOM quando requisitado
    – Gih
    Commented 6/05/2016 às 14:52
  • Muito obrigado pelo esclarecimento, @Gih Commented 6/05/2016 às 19:59
  • Ele não remove do dom exatamente, ele apenas não irá aparecer dentro da condição, que no caso é o seu loop, o ng-if é uma condição que fará a verificação do valor, conforme o parâmetro da sua coleção e a igualdade, diferença, maior, menor, verdadeiro, falso, etc. Dependendo da condição que você colocar. Commented 11/05/2016 às 12:27
-1

Use uma combinação de ng-show/hide com uma variável de controle que mude de valor após o click.

2
  • 2
    Amigo, falta um código de exemplo. Para que seja uma resposta boa, é válido que haja demonstração de como fazê-lo. Commented 6/05/2016 às 11:21
  • Obrigada por responder @JohnnyGabriel, no caso hide apenas oculta visualmente mas continua no DOM (console), ng-if pode ser solução, mas no meu caso o era apenas seguir a dica do Gabriel Câmara
    – Gih
    Commented 6/05/2016 às 15:57

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 .