#StackBounty: #javascript #angularjs #datatables How to render angular ng if/show within database

Bounty: 50

current I am working with a combination of datatables + angularjs. I’m following documentation here. https://l-lin.github.io/angular-datatables/archives/#!/gettingStarted

My table is rendering and getting populated with angularjs code. The issue I am coming across is I only want the photo text to appear only when it exist. When I inspect the element, ng-hide is always set. It’ll appear fine if I remove ng-if.


<table datatable="ng" class="contact-grid-table row-border" dt-options="vm.dtOptions2" dt-column-defs="vm.dtColumnDefs" dt-instance="dtInstanceCallback" id="tableId">
        <tr ng-repeat="contact in vm.contacts">
            <td><span ng-if="contact.photo">{{contact.photo}}</span></td>

I also tried the suggestion here ng-show not working in datatables columns but my table will no longer load. Page just freezes.

May I ask if there’s any suggestions on how to get ng-if/show to work with datatables.

vm.dtOptions2 = DTOptionsBuilder.newOptions()
    .withOption('createdRow', function (row, data, dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
    .withOption('headerCallback', function (header) {
        if (!vm.headerCompiled) {
            // Use this headerCompiled field to only compile header once
            vm.headerCompiled = true;
    .withPaginationType('full_numbers').withOption('responsive', true)
    .withColReorderOrder([0,1, 2,3])
    .withOption('bFilter', false) // for search box
    .withOption('bInfo', false) // for showing counts at the bottom
    .withOption('deferRender', true)
    .withOption('scrollY', 200)
    // Set order
    // Fix last right column
        bottom: false

Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.