Updating html from AngularJS

Question

Im trying to learn the basics with AngularJS and trying to make a text visible when a number is big enough. It looks like the more() function is only called once, when the page is displayed first time. The lessThan3() function returns the correct value, but it doesnt work when trying ng-hide.

AngularJS

function ApplicationController($scope,$interval) {   
    $scope.number = 0;
    $interval(function() {
         $scope.number++;
    }, 1000);

    $scope.lessThan3 = function(){
        return ($scope.number < 3);
    }
}

Html

Number: {{ number }}
{{ lessThan3() }}
<p ng-hide="{{ lessThan3 }}">
    Less than 3
</p>

link to code: http://jsfiddle.net/bBaa2/71/

Ilya Chernomordik · Accepted Answer · 2016-11-11 21:04:04Z

2

It's just

<p ng-show="more()">

for the jsfiddle, or

<p ng-hide="lessThan3()">

for the example here.

without {{}}

answered Nov 11, 2016 at 21:04

Ilya Chernomordik

30.9k31 gold badges146 silver badges245 bronze badges

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

3 Comments

joxxe Over a year ago

Ah! Thx. Thought I was supposed to use {{ }} when using variables and functions

Ilya Chernomordik Over a year ago

This is for interpolation as a string. This is a bit special when you bind to attributes.

Ilya Chernomordik Over a year ago

@joxxe don't forget to upvote and accept the answer if you like it :)

Luis Lavieri · Accepted Answer · 2016-11-11 21:14:28Z

Change your HTML code to: <p ng-hide="number > 3">Less than 3</p> or to <p ng-hide="lessThan3()">Less than 3</p> if you prefer to call the method

You don't need the data binding syntax when using ng-hide/ng-show/ng-if/ and other similar directives.

function ApplicationController($scope,$interval) {
    
    $scope.number = 0;
  
    $scope.testTimer = function() {
        $interval(function() {
            $scope.number++;
        }, 1000);
    };
    $scope.lessThan3 = function(){
        return ($scope.number > 3);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ApplicationController">   
    <pre>Number: {{ number }}</pre>
    <button ng-click="testTimer()">Test Timer</button>
    <p ng-show="lessThan3()">
    More than 3
    </p>
    <p ng-hide="lessThan3()">
    Less than 3
    </p>
</div>

adam-beck · Accepted Answer · 2016-11-11 21:04:54Z

1

The syntax is incorrect:

<p ng-hide="lessThan3()">

But be aware that I also think your logic is incorrect if I can assume what you are trying to do. You want to hide the element when number is greater than 3. Or at least change the message.

answered Nov 11, 2016 at 21:04

adam-beck

6,0295 gold badges22 silver badges35 bronze badges

Comments

Luka Lopusina · Accepted Answer · 2016-11-11 21:14:20Z

0

You need to change your HTML:

<div ng-app ng-controller="ApplicationController">   
    <pre>Number: {{ number }}</pre>
    <button ng-click="testTimer()">Test Timer</button>

    <p ng-show="more()">
    More than 3
    </p>

    <p ng-hide="more()">
    Less than 3
    </p>
</div>

edited Nov 11, 2016 at 21:14

answered Nov 11, 2016 at 21:06

Luka Lopusina

2,6473 gold badges29 silver badges33 bronze badges

1 Comment

Omar Martinez Over a year ago

Not necessarily, if you check the funcion more is already looking for de number.

Collectives™ on Stack Overflow

Updating html from AngularJS

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Related