angular ng-repeat dynamic generate checkbox and string

Question

I have a directive that host a template that takes in a JSON (that contain some data for building a table, and some method to manipulate the data) and generate a table.

relevant code in the template:

 <table class="table" id="table_{{table.name}}">
        <thead>
          <tr>
            <th ng-repeat="header in table.headers track by $index">{{header}}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in table.rows track by $index">
            <td ng-repeat="item in row track by $index"
                ng-Click="table.selectedRow(row)">
               {{item}}
            </td>
          </tr>
        </tbody>
      </table>

an example of a json being fed into this template

$scope.searchTable = {
    headers: ["title", "deleted"],
    rows: [ ["ABC", true],
            ["DEF", false] ],
    [...]

}

My question is:

sometimes the table require a column with checkboxs, depending on the data. Is there any way to change my template so that when necessary it will generate a column of checkbox instead of just string?

For example: For the JSON example above, let's say I want the column of deleted to be checkboxes. So if an entry is deleted that row will have a unchecked checkbox under the deleted column.

Does this make any sense? Everything is generated dynamic, so I have no idea which column will be checkboxes. It all depends on the data the page gets from the server. So in the example: the server will tell client which entry is readable, then I will generate that JSON and feed it to the template. How should I structure my JSON and the template

Is this even doable? Any tips?

Drag13 · Accepted Answer · 2016-06-13 18:16:53Z

2

  <tr ng-repeat="row in table.rows track by $index">
          <td ng-repeat="item in row track by $index">
          <div data-ng-if="item.type!=='checkbox'" ng-Click="table.selectedRow(row)"></div>
          <div data-ng-if="item.type==='checkbox'"> <input type="checkbox" /></div>

               {{item}}
            </td>
  </tr>

answered Jun 13, 2016 at 18:16

Drag13

6,0281 gold badge22 silver badges44 bronze badges

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

3 Comments

Drag13 Over a year ago

Np) Mark as answer pls)

user308553 Over a year ago

There is a time limit, have to wait before I can check an answer

Drag13 Over a year ago

Didnt know. Thanks!

Collectives™ on Stack Overflow

angular ng-repeat dynamic generate checkbox and string

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related