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;
}

Community · Accepted Answer · 2017-05-23 11:59:30Z

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, 2017 at 11:59

CommunityBot

11 silver badge

answered Mar 23, 2016 at 16:05

Tmb

48012 silver badges22 bronze badges

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

3 Comments

kennechu Over a year ago

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 Over a year ago

I have something like this for each radio button: <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topCategory" ng-change="updateTotals(topTable.value)">TY Top 30 Categories</label

Tmb Over a year ago

@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

Collectives™ on Stack Overflow

Use html ID with angularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related