Question

我是Angular的新手。我正在使用1.7.7版本。

我正在寻找的是这个

：

我有一个输入框，每当用户在其中输入任何值时，只有我想要显示该表，否则就没有。另外，当输入框再次变为空时，我想再次隐藏表格。请参考下面的代码片段以获得更好的理解。请让我知道是否有任何不清楚的地方。预先感谢！

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>

Answer 1

基本上，您只需要更改

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

收件人

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

原因是您在此处将模型绑定到dimen：

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

如果输入的值不符合验证（min="2" max="100"），则angularjs不会将任何值绑定到dimen-将是undefined，它将删除DOM中的表格

角度：仅在输入框中输入任何值时显示内容

1 个答案: