Use html ID with angularJS

Question

I have a four tables that populates data using ng-repeat and I have some validation to show one table or another depending on a radio button selection.

I call a CSS id in the table called "fixtable". The issue is that if I remove the ng-if of any of the tables it works, the header is fixed but I need those validations to show or hide the tables.

It looks like angular dont recognize the "id" property or I dont know.

Any help on this, Im in a hurry.

<div  ng-if="topTable.value === 'topCategory'" ng-show="loadViewCategories">
  <table class="table" id="fixTable">
      some code
  </table>

<div  ng-if="topTable.value === 'topBrand'" ng-show="loadViewBrand">
  <table class="table" id="fixTable2">
      some code
  </table>

Inside the HTML I call my function to make the fiexd header like this

<script>
 $(document).ready(function() {
    $("#fixTable").tableHeadFixer();
    $("#fixTable2").tableHeadFixer();
    $("#fixTable3").tableHeadFixer();
    $("#fixTable4").tableHeadFixer();
 });
</script>

And I have some CSS that makes my table scrollable all the way to the right

    #fixTable {
    width: 2700px !important;
}
#fixTable2 {
    width: 2700px !important;
}
#fixTable3 {
    width: 2700px !important;
}
#fixTable4 {
    width: 2700px !important;
}

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

It's because ng-if="topTable.value === 'topCategory'" remove your table from the DOM, so when you call $("#ID").tableHeadFixer();, it doesn't work on the tables not present in the DOM.

You have two solutions:

remove your ng-if, and use a ng-show instead, because ng-show keep your table in the DOM, it only make it not visible. Note that there is others important differences between those two directives, you can learn more about them on this thread
each time you change topTable.value, call the tableHeadFixer() to make it works

edited May 23 '17 at 11:59

Community

1
1

answered Mar 23 '16 at 16:05

Tmb

450
12
20

The first option is like using ng-show twice in the same line? ng-show="topTable.value === 'topCategory'" and ng-show="loadViewCategories" ?? and for the second option, where can I call the tableHeadFixer() Thanks for your time. – kennechu Mar 23 '16 at 16:10
I have something like this for each radio button: TY Top 30 Categories – kennechu Mar 23 '16 at 16:14
@kennechu You can't use ng-show twice on the same element, you have to use it this way : `ng-show="topTable.value === 'topCategory' && loadViewCategories"`. For the second option, you can call the tableHeadFixer() in your updateTotals function – Tmb Mar 23 '16 at 16:15

Use html ID with angularJS

1 Answers1