Angular：当用户选择大小时，创建 n x n 的动态表答案

【问题标题】：Angular: Create dynamic table of n x n when size is selected by the userAngular：当用户选择大小时，创建 n x n 的动态表
【发布时间】：2019-07-14 14:15:36
【问题描述】：

更新：

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

我正在寻找的是：

每当我从select 列表中选择一个特定值，比如说n（请参考代码sn-p），它应该显示一个n x n 的表格。每当用户再次更改select 列表的值时，新表应替换前一个表。请让我知道是否有任何不清楚的地方。提前致谢！

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.getCol = function(){
    arr = [];
    count = 0;
    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;
  };
});

<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">Angular</h1>
  <form>
    Select Dimensions (2-100):<br>
    <select ng-model="dimen" ng-change="getCol();getRow();">
      <option value="">--Select--</option>
      <option ng-repeat="n in getNum" value={{n}}>
        {{n}}
      </option>
    </select>
  </form>
  <h3>{{dimen}}</h3>
  <table>
      <tr>
        <th ng-repeat="c in getCol">{{c}}</th>
      </tr>
    <tr>
      <td ng-repeat="r in getRow">{{r}}</td>
    </tr>
  </table>
</body>
</html>

【问题讨论】：

标签： angularjs html-table

【解决方案1】：

因为您用作函数参数的 $scope 与您在控制器顶部定义的 $scope 不同。删除 $scope 参数即可解决问题。

由于 getRow 和 getCol 是函数，因此您的 ng-repeats 应采用以下格式

<table>
    <tr>
        <th ng-repeat="c in getCol()">{{c}}</th>
    </tr>
    <tr>
      <td ng-repeat="r in getRow()">{{r}}</td>
    </tr>
</table>

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

app.controller('mainCtrl',function($scope){
  $scope.dimen;
  $scope.n = 10;
  $scope.max = 50;
  $scope.getNum = function(){
    arr = [];
    for(i = 2 ; i <= 100; i++) {
      arr.push(i);
    }
    //console.log(arr);
    return arr;
  }();
  $scope.getCol = function(){
    arr = [];
    count = 0;
    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));
      } 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;
  };
});

<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">Angular</h1>
  <form>
    Select Dimensions (2-100):<br>
    <select ng-model="dimen" ng-change="getCol()">
      <option value="">--Select--</option>
      <option ng-repeat="n in getNum" value={{n}}>
        {{n}}
      </option>
    </select>
  </form>
  <h3>{{dimen}}</h3>
  <table>
    <thead>
      <tr>
        <td ng-repeat="c in getCol()">{{c}}</td>
      </tr>
    </thead>
    <tr>
      <td ng-repeat="r in getRow()">{{r}}</td>
    </tr>
  </table>
</body>
</html>

【讨论】：

谢谢。另外，我想知道您是否可以帮助我相应地显示表格。请参阅问题部分。谢谢！