Question

更新：

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

我正在寻找的是这个

：

每当我从n列表中选择一个select的特定值时（请参阅代码段），它应该显示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>

Answer 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>

角度：当用户选择大小时，创建n x n的动态表

1 个答案: