CODEWITHSUNDEEP
angularjs
Dhruvil21_04
Dhruvil21_04

Reputation: 2189

Angular: show content only when any value is entered in the input box

I'm new to Angular. I'm using 1.7.7 version.

What I'm looking for is this:

I have an input box and whenever the user enter any value in it, then only I want to display the table, else not. Also, when the input box becomes empty again, I want to hide the table again. Please refer to the code snippet below for better understanding. Please, let me know if anything is unclear. Thanks in advance!

const app = angular.module('grad-table', []);

app.controller('mainCtrl', function($scope) {
  $scope.dimen;
  $scope.n = 10;
  $scope.max = 100;
  /* $scope.getNum = function(){
    arr = [];
    for(i = 2 ; i <= $scope.max; i++) {
      arr.push(i);
    }
    //console.log(arr);
    return arr;
  }(); */
  $scope.getColName = function() {
    arr = [];
    for (i = 1; i <= $scope.dimen; i++) {
      j = Math.floor(i / 26); // used to calculate first Alphabet in two letter column name
      if (i <= 26) {
        arr.push(String.fromCharCode(64 + i)); // For A-Z one character
      } else if (i % 26 == 0) {
        arr.push(String.fromCharCode(64 + j - 1, 64 + (i - 26 * (j - 1)))); // For last Z in two character
      } else {
        arr.push(String.fromCharCode(64 + j, 64 + (i - 26 * j)));
      }
    }
    //console.log(arr);
    return arr;
  };
  $scope.getRow = function() {
    arr = [];
    for (i = 1; i <= $scope.dimen; i++) {
      arr.push(i);
    }
    //console.log(arr);
    return arr;
  };
  $scope.getColNum = function() {
    arr = [];
    for (i = 1; i <= $scope.dimen; i++) {
      arr.push(i);
    }
    return arr;
  };
  $scope.showTable = true;
  $scope.showHide = function() {
    console.log("function is called");
    if ($scope.dimen != null) {
      $scope.showTable = true;
    }
  };
  console.log($scope.showTable);
});
body {
  font-family: "Arial";
}

.selectDimen {
  margin-bottom: 20px;
}

#grid,
#grid td,
#grid th {
  border: 1px solid #a03232;
}

#grid {
  border-collapse: collapse;
  font-size: 10px;
}

#grid td {
  height: 20px;
  width: 20px;
}

.rowNum {
  text-align: center;
  font-weight: bold;
}

.cellNum {
  color: #984444;
  text-align: right;
  font-size: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="grad-table">

<head>
  <title>Page Title</title>
</head>

<body ng-controller="mainCtrl">
  <h1 class="title">Gradient Table</h1>
  <form class="selectDimen">
    Select Dimensions (2-100):<br>
    <input type="number" ng-model="dimen" value="" min="2" max="100" (input)="showHide()" />
  </form>
  <table ng-show={{showTable}} id="grid">
    <tr>
      <td class="empty cell"></td>
      <th ng-repeat="c in getColName()">{{c}}</th>
    </tr>
    <tr ng-repeat="r in getRow()">
      <td class="rowNum">{{r}}</td>
      <td class="cellNum" style="background-color:rgba(255,0,0,{{ ((r+c) - 2) / (2*dimen - 2) }});" ng-repeat="c in getColNum()">{{r + c}}</td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Views: 257

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

Basically you just need to change 

<table ng-show={{showTable}} id="grid">

To

<table ng-if="dimen" id="grid">

The reason is that you bind the model to dimen here:

<input type="number" ng-model="dimen" value="" min="2" max="100" (input)="showHide()" />

And if the value of the input doesn't comply to the validation (min="2" max="100") then angularjs will NOT bind any value to dimen - It will be undefined which will remove the table from the DOM

Upvotes: 1

Related Questions