How to make the contents appear in the DOM just after clicking - AngularJS

Navigation
1

Hello, I'm a beginner with AngularJS.

To insert and delete new fields, this is ok, see the fiddle: link

I need to load the page and not have all the content inside the jumbotron div 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 enter content only after clicking? This is already working, but I need to load the screen with just the include button and the content of the div jumbotron is not loaded at all.

    
asked by anonymous 05.05.2016 / 21:13

3 answers

1

You could do this in several ways. I think the simplest would be how @Johnny Gabriel quoted: 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.

    
06.05.2016 / 14:05
0

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

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

Here's the working example .

Another way, would be to create in your object another parameter called status. And bring only those that have the status true . no% w / w, and in the action of the ng-click button you would call a sequential action, changing the status of the list elements of your array / object.

    
06.05.2016 / 14:27
-1

Use a combination of ng-show / hide with a control variable that changes value after the click.

    
06.05.2016 / 04:44
Problem deserializing Json object with VRaptor4 Curiosity - PHP and Data Query Limit