Display table rows in angularjs, if data exists

Question

I want to have a table consisting of 3 columns, the code looks like this

    <table class="table-striped table-bordered table-condensed">
    <tbody>

    <tr ng-if="$index%3==0" ng-repeat="permission in vm.parent.getAllPermissions(category)">
    <td ng-repeat="i in [0,1,2]" class="col-xs-2">

    <span>

    <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">                              {{vm.parent.getPermissionTitle(category,$parent.$index+i) || " "}}

</span> 
</td> 
</tr>
</tbody>
</table>

That works great except for a small issue.

There's simply not enough json data to fill 3 rows, so 2 checkboxes are displayed empty

What I tried, is writing something like

vm.hasPermission = function(category, index) {
    var permissions = vm.getAllPermissions(category);
    return permissions && index < permissions.length
};

And then something like

    <span>
    <input ng-if="vm.parent.hasPermission(category,$parent.$index+i)"type="checkbox"
 checklist-model="vm.data.permissions" checklist-
value="vm.parent.getPermission(category,$parent.$index+i)">                                                      {{vm.parent.getPermissionTitle(category,$parent.$index+i) || " "}}
    </span>

It fixes the problem but not on all tables, some tables would still have empty checkboxes.

I get the permission titles like this

vm.getPermissionTitle = function(category, index) {
    var permissions = vm.getAllPermissions(category);   
    if (index < permissions.length) {
     return i18n.get(permissions[index]);
    } else {
     return '';
    }
};

I tried removing the return, didn't fix it.

I would appreciate a fix without extra dependencies, like ng-tables. — Lynob
– Lynob, Commented Jul 26, 2016 at 13:14
@IsmailFarooq ok thanks, I'll try that first, if didn't work then I'll try making a live example, the problem with that is I have to get json from somewhere, if I were to run in online — Lynob
– Lynob, Commented Jul 26, 2016 at 13:18

DIEGO CARRASCAL · Accepted Answer · 2016-07-26 14:44:48Z

1

change:

<td ng-repeat="i in [0,1,2]" class="col-xs-2">
    <span>
        <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">                              {{vm.parent.getPermissionTitle(category,$parent.$index+i) || " "}}
    </span> 
</td>

for:

<td ng-repeat="i in [0,1,2]" class="col-xs-2">
    <span ng-if="vm.parent.getPermissionTitle(category,$parent.$index+i)!=''">
        <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">                              {{vm.parent.getPermissionTitle(category,$parent.$index+i)}}
    </span> 
</td>

if I understood well your code and your problem, vm.parent.getPermission(category,$parent.$index+i) returns the text (permission) so just check that is not empty... it may also work like:

<td ng-repeat="i in [0,1,2]" class="col-xs-2">
    <span ng-if="vm.parent.getPermissionTitle(category,$parent.$index+i)">
        <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">                              {{vm.parent.getPermissionTitle(category,$parent.$index+i)}}
    </span> 
</td>

because vm.parent.getPermission(category,$parent.$index+i) returning nothing could evaluate false.

I haven't try it.

edited Jul 26, 2016 at 14:44

answered Jul 26, 2016 at 13:20

DIEGO CARRASCAL

2,12916 silver badges16 bronze badges

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

4 Comments

Lynob Over a year ago

it did work but now everywhere, if there are only two rows to be displayed, it will display a third empty checkbox, but otherwise it's working, it's just there's a small bug remaining

DIEGO CARRASCAL Over a year ago

then the bug is not in the code, but in the json, there must be a vm.parent.getPermissionTitle(category,$parent.$index+i) returning a space or invisible characters...

Lynob Over a year ago

actually your fix will make the data get repeated

DIEGO CARRASCAL Over a year ago

Doing this: <span ng-if="vm.parent.getPermissionTitle(category,$parent.$index+i)!=''"> cause the data to repeat? it should have something to do with the $index variable, but with the code you provided is hard to tell.

Lynob · Accepted Answer · 2016-07-27 12:37:08Z

0

The solution is

<table class="table-striped table-bordered table-condensed">
<tbody>
    <tr ng-if="$index%3==0" ng-repeat="permission in vm.parent.getAllPermissions(category)">
        <td ng-repeat="i in [0,1,2]" class="col-xs-2">
            <span ng-if="vm.parent.getPermission(category,$parent.$index+i)">
                <input type="checkbox" checklist-model="vm.data.permissions" checklist- value="vm.parent.getPermission(category,$parent.$parent.$index+i)">
    {{vm.parent.getPermissionTitle(category,$parent.$parent.$index+i)}}
</span>
</td>
</tr>
</tbody>
</table>

So basically {{vm.parent.getPermissionTitle(category,$parent.$parent.$index+i)}}

answered Jul 27, 2016 at 12:37

Lynob

5,37516 gold badges73 silver badges135 bronze badges

Collectives™ on Stack Overflow

Display table rows in angularjs, if data exists

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related