How to make the content appear in the DOM only after clicking - Angularjs

Question

Hello, I am beginner with Angularjs.

To insert and delete new fields this is all ok, see fiddle: http://jsfiddle.net/zbdvke2w/4/

It happens that I need that when loading the page there is not all the content that has inside the div Jumbotron in the 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>

How do I insert the content just after clicking? This is already working, but I need that when loading the screen have only the include button and is not ever loaded the content of the div Jumbotron.

Answer 1

You could do this in a lot of ways. I believe the simplest would be the way @Johnny Gabriel quoted it: create a control variable and change it.

In your Jsfiddle code, you can see that you have added an element within the initial vector $scope.ICMSs = [{}];

So that there is no element, you can leave this vector empty.
$scope.ICMSs = [];

So there will only be the include button.

Answer 2

A simple way to do this is by removing the first one, using its removal method within a method init() inside your controller:

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

Here the working example.

Another way would be to create in your object another parameter called status. And bring only those with the status true. in the ng-if="icms.status == true", and in the ng-click button action you would call a sequential action, changing the status of the list elements of your array / object.

Answer 3

Use a combination of ng-show/Hide with a control variable that changes value after clicking.