CODEWITHSUNDEEP
angularjshtml-tableangularjs-ng-repeat
PrabhuRaj
PrabhuRaj

Reputation: 21

Dynamically build html table rows and columns ngrepeat

I'm very new to angular js and I have a problem with building a html table with ngrepeat. I have to build a html table for roles and permission and in this I have to list all actions on the header part like (show, Add, Edit, Delete, Print, Email .. ) and each row I have to display the module and a check box under each action if that module has that actions. for example some module will not have a email option and for that we should not display the checkbox under that action. Please help me with this and it will be useful for my learning purpose as well. 

*------------------------------------------------------------*   
| Module       | Show | Add  | Edit | Delete | Print | Email |
+--------------|------|------|------|--------|-------|-------+
| Purchase     | *    |  *   |  *   |   *    |   *   |   *   |
|--------------|------|------|------|--------|-------|-------|
| Sales        | *    |  *   |  *   |   *    |   *   |   *   |
|--------------|------|------|------|--------|-------|-------|
| XXXXXX       | *    |  *   |  *   |   *    |       |       |
|--------------|------|------|------|--------|-------|-------|
| xxx-Reports  | *    |      |      |        |   *   |   *   |
*------------------------------------------------------------*   

* reperesents checkboxes

I'm getting two json from the webservice, once for header and the other for Modules and actions.

Header 

{"Headers":[{"action_id":0,"name":"list"},{"action_id":1,"name":"Add"},{"action_id":2,"name":"Edit"},{"action_id":3,"name":"Delete"},{"action_id":4,"name":"Email"},{"action_id":4,"name":"Print"}]}

Body

{"Purchase":[{"name":"list","action_id":0,"status":1},{"name":"Add","action_id":1,"status":1},{"name":"Edit","action_id":2,"status":0},{"name":"Delete","action_id":3,"status":0}],"Sales":[{"name":"list","action_id":0,"status":1},{"name":"Add","action_id":1,"status":1},{"name":"Edit","action_id":2,"status":0},{"name":"Delete","action_id":3,"status":0}],"DC":[{"name":"Add","action_id":1,"status":1},{"name":"Edit","action_id":2,"status":0},{"name":"Delete","action_id":3,"status":0},{"name":"Email","action_id":4,"status":0},{"name":"Print","action_id":5,"status":0}]}

If we click show check box, all other corresponding action checkbox should be checked.

I have no problem in building the columns but I have no idea on how to build the rows and place checkbox on appropriate columns.

Upvotes: 2

Views: 5686

Answers (1)

Yuvaraj
Yuvaraj

Reputation: 166

First you have to build the table header which is straight forward. just use ngrepeat on the header json . 

    <thead>
        <tr>
            <th> Module </th>
            <th ng-repeat = "key in head.Headers" > {{key.name}} </th>
        </tr>
    </thead>

And then using the same header json , iterate through each module, find whether the action is availabe for that particular module and display the checkbox . 

<tbody>
    <tr ng-repeat = "(key_body,val_body) in jsonbody">
        <td>{{key_body}}</td>
        <td ng-repeat = "key in head.Headers">
        <input type="checkbox" ng-modal="output[key_body][key.name]"  ng-if = "(val_body|filter:key.name:true).length>0" >
        </td>
    </tr>
</tbody>

This may not be a professional method but def it will solve your purpose.

Plunker link is given below

http://plnkr.co/edit/I2MAUcPgBAUjvjfBHlFe?p=preview

Upvotes: 2

Related Questions