Create dynamic grid in angularjs

Question

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

Community · Accepted Answer · 2017-05-23 11:58:05Z

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 ;)

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Feb 7, 2014 at 8:08

glepretre

8,1675 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pranav Over a year ago

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.

glepretre Over a year ago

updated answer! I added a link, if you don't feel the need to use ng-grid to solve that :)

Pranav Over a year ago

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.

glepretre Over a year ago

My pleasure ;) Could you accept the answer if it was what you were looking for? :)

Collectives™ on Stack Overflow

Create dynamic grid in angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related