show div depend on number of clicks using ng-show, ng-click, ng-init

Question

I want to show one div by default. If a button clicked, show the second div and if it clicked again, show the third div. I tried ng-if and ng-show and nothing happened.

    <table class="">
          <tbody>
             <tr>
                <td class="">Year</td>
                <td class="">#1
                   <button class="button-primary" type="button" ng-model="cnt" 
                   ng-click="cnt = cnt+1" ng-init="cnt=1">Add</button>
                </td>
              </tr>
             <tr *ngFor="let year of yearList; index as i;">
              <td class="">{{year}}</td>
              <td class="" ng-show="cnt >= 1"><input class="" type="number"></td>
              <td class="" ng-show="cnt >= 2"><input class="" type="number"></td>
              <td class="" ng-show="cnt >= 3"><input class="" type="number"></td>
             </tr>
            </tbody>
          </table>

The output should be:

Default:
year     #1
1990     50
1995     10

after first click:
year     #1   #2
1990     50   30
1995     10   40

after second click
year     #1   #2   #3
1990     50   30   30
1995     10   40   30

Also, I don't know how to use function in ts and how to pass number of clicks.

<button class="" (click)="addScenario()">Add </button>

Answer 1

You should use cnt >= 1. If cnt becomes 2, it hides the first input and shows the second input.

You also need to remove the =1 from the ng-model, because it doesn't allow assignment inside such a condition.

Finally, I replaced the tr and td with div. It might have been because of the code snippet, but because we weren't in a table environment, the tr and td were removed - along with the ng-show on the td.

angular.module('myApp', [])
  .controller('ctrl', function($scope) {});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <table class="">
    <tbody>
      <tr>
        <td class="">Year</td>
        <td class="">#1
          <button class="button-primary" type="button" ng-model="cnt" ng-click="cnt = cnt+1" ng-init="cnt=1">Add</button>
        </td>
      </tr>
      <tr *ngFor="let year of yearList; index as i;">
        <td class="">{{year}}</td>
        <td class="" ng-show="cnt >= 1"><input class="" type="number"></td>
        <td class="" ng-show="cnt >= 2"><input class="" type="number"></td>
        <td class="" ng-show="cnt >= 3"><input class="" type="number"></td>
      </tr>
    </tbody>
  </table>
</div>

---

You can also work with an array of values if you'd like, and extend that array on every click

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.inputs = [0];
    $scope.add = function() {
      $scope.inputs.push(0);
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <button class="button-primary" type="button" ng-click="add()" ng-disabled="inputs.length == 3">Add {{inputs.length}}</button>
  <div>
    <div class="" ng-repeat="input in inputs track by $index"><input class="" type="number" ng-model=input></div>
  </div>
</div>