Angular: создание динамической таблицы nxn, когда размер выбирается пользователем - PullRequest
Новая
       9

Angular: создание динамической таблицы nxn, когда размер выбирается пользователем

0 голосов
/ 20 февраля 2019

Обновление:

Я новичок в 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>

1 Ответ

0 голосов
/ 20 февраля 2019

Поскольку $ scope, которую вы используете в качестве параметров функции, отличается от $ scope, который вы определяете в верхней части вашего контроллера.Удаление параметров $ scope решает проблему.

Поскольку getRow и getCol являются функциями, ваши ng-повторы должны иметь следующий формат 

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