Comparing a variable defined from angularJS controller in HTML page

Question

I'm pretty new to AngularJS so hopefully this is easy, I have the following HTML where I am trying to check if a current page is equal to zero and if so, I changed the class name of the tag to disabled. (currentPage is defined to be zero in my controller)

<script>
    if ('{{currentPage}}' == 0) {
        document.getElementById("prev").className = "disabled";
    }
    if ('{{currentPage}}' >= '{{eventslist}}'.length / '{{pageSize}}' - 1) {
        document.getElementById("next").className = "disabled";
    }
</script>

However, whenever I try to do a check like this, it never sees currentPage as zero. So then I added an else statement just to see what currentPage actually is.

<script>
    if ('{{currentPage}}' == 0) {
        document.getElementById("prev").className = "disabled";
    } else {
        document.getElementById("prev").innerHTML = "{{currentPage}}";
    }
    if ('{{currentPage}}' >= '{{eventslist}}'.length / '{{pageSize}}' - 1) {
        document.getElementById("next").className = "disabled";
    }
</script>

After doing this, sure enough, it does come back as zero. Any ideas why the if statement fails on something so simple? Thanks in advanced!

Why not to put this code inside the controller and use $scope for working with local variables? — VisioN
– VisioN, Commented Jun 27, 2014 at 15:09
Have you gone through the Angular JS tutorial on the home page? I think you need to get a better understanding of how Angular is incorporated into a web app before trying to do this. For starters I've never seen binding in a script block before... — Lee Willis
– Lee Willis, Commented Jun 27, 2014 at 15:12
The reason this doesn't work is because your script block is trying to compare the literal string {{currentPage}} to 0: Angular hasn't had a chance to do its thing before the browser tries to interpret the inline <script> block. The correct way to do this would be to put all this logic in an Angular directive; then you won't need to muck about with direct DOM manipulation like innerHTML. — Daniel Beck
– Daniel Beck, Commented Jun 27, 2014 at 15:19
I clearly have some researching and more learning to do, thanks for the responses. @LeeWillis — bjohnson
– bjohnson, Commented Jun 27, 2014 at 15:35

Manuel Mazzuola · Accepted Answer · 2014-06-27 15:17:20Z

2

<div id="prev" ng-class="{'disabled': currentPage === 0}">
<span ng-if="currentPage !== 0">{{currentPage}}</span>
</div>
<div id="next" ng-class="{'disabled': currentPage >= eventsList.length / pageSize - 1}"></div>

answered Jun 27, 2014 at 15:17

Manuel Mazzuola

7951 gold badge7 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Comparing a variable defined from angularJS controller in HTML page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related