1

I am new to angularjs, I want to create grid of 12*12

I was able to get it using following options - 1. Use nested for loop and append elements to the parent div appropriately. 2. Create static grid

but above options are not involving angular framework at all. :(

What is the best way to do it in angular ? means where should I write the loop (in controller ?) and how it will be rendered ? I tried ng-repeat but I could not find the way to get it done (on what data should I iterate ?).

I understand that, this might be silly question. :(

Pranav
  • 2,054
  • 4
  • 27
  • 34

1 Answers1

3

You can indeed use ng-repeat, that's what I did. It would look like:

HTML

<table>
  <tbody>
    <tr ng-repeat="row in tableData track by $index" ng-model="row">
      <td ng-repeat="cell in row track by $index" "ng-model="row[$index]">
         <!-- awesome content -->
      </td>
    </tr>
  </tbody>
</table>

And if you want to make a 12*12, you will need to define in your controller an array of arrays 12*12:

JS

$scope.tableData = [
  ["A1","B1","C1",..."M1"],
  //...
  ["A12","B12","C12",..."M12"]
]

Or you can have a look at ng-grid, it's a great work from Angular-UI team: http://angular-ui.github.io/ng-grid/

EDIT:

If you don't need to repeat over an array but only a defined number of times, you should have a look at this question ;)

Community
  • 1
  • 1
glepretre
  • 8,154
  • 5
  • 43
  • 57
  • Thanks for the reply, but i do not want to have any data in controller like `tableData` because there is nothing like to store for every element. and in case of dynamic dimensions, i need to re-create the array. Will try it ! thanks. – Pranav Feb 07 '14 at 08:25
  • updated answer! I added a link, if you don't feel the need to use ng-grid to solve that :) – glepretre Feb 07 '14 at 10:49
  • sorry for the late reply, it helped me a lot, also I achieved it by creating grid of objects and I realized that without that object array I would not have anything to deal with. so ! thanks a lot. – Pranav Feb 14 '14 at 09:30
  • My pleasure ;) Could you accept the answer if it was what you were looking for? :) – glepretre Feb 14 '14 at 10:16