2014-12-11 2 views
0

Мне нужна ваша помощь. У меня есть 2 поля для ввода размерности таблицы (ввод для числа строк и столбцов) и одна кнопка. Если я нажму на эту кнопку, таблица должна быть заполнена динамически с заданным количеством строк и столбцов. Как это сделать, эта таблица заполняется значениями, начиная с нижней правой спиральной ячейки/в цепи слева и сверху, пока все ячейки (по часовой стрелке) ...AngularJS - динамические строки и столбцы таблицы с циклическими значениями таблицы

Каков наилучший способ для этого с HTML , AngularJS, jQuery/JavaScript. (Смотрите рисунок) http://i.imgur.com/O4GRpND.jpg

Большое спасибо

В настоящее время я сделал что-то так же, как это:

Циклическая стол

<fieldset> 
    <legend>Input</legend> 
<label id="nameRow" >Number of Rows</label> <br /> 
<input type="number" ng-model="row" placeholder="Row" ><br /><br /><br /> 
<label id="nameCol">Number of Columns</label> <br /> 
<input type="number" ng-model="col" placeholder="Column" ><br /> 
<br></br> 
<button type="button" ng-click="addRowCol()">KREIRAJ TABLICU</button> 
</fieldset> 

<table border="1" cellpadding="10"> 

    <body> 
    <tr ng-repeat="input Rows and Columns"> 
     <td> 
     {{ input.row }} 
     </td> 
     <td> 
     {{ input.column }} 
     </td> 


    </tr> 
    </body> 
</table> 

+0

Кто-то задаст вам типичный вопрос «что у вас есть» – Yang

ответ

1

Назначьте строки и столбцы переменной на области. Затем в вашем шаблоне выполните ng-repeat для количества столбцов и строк и выведите таблицу. Возможно, вам придется сначала преобразовать число в массив.

Что-то вроде этого:

В контроллере:

$scope.columns = 5; 
$scope.rows = 5; 
$scope.getNumber = function(num) { 
    return new Array(num); 
} 

По мнению:

 <table> 
      <thead> 
       <th ng-repeat="col in getNumber(columns)" ></th> 
      </thead> 

      <tbody> 
       <tr ng-repeat="col in getNumber(rows)" > 
        <td ng-repeat="row in getNumber(columns)" ></td> 
       </tr>   
      </tbody> 
     </table> 

Если вы имели массив значений и хотел напечатать значения, которые вы можете сделайте это с фигурными скобками внутри вашего ng-repeat, как col или row, зависящими от данных.

Надеюсь, это поможет!

+0

Возможно, вам понадобится отдельный массив для ваших заголовков и ваших данных td, если они также отличаются. – loujaybee

+0

Количество строк и столбцов не фиксировано ... Это число вводимых значений из полей ... – oknevermind