CODEWITHSUNDEEP
javascriptangularjshtml
joxxe
joxxe

Reputation: 259

Updating html from AngularJS

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/

Upvotes: 0

Views: 45

Answers (4)

Luis Lavieri
Luis Lavieri

Reputation: 4109

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>

Upvotes: 2

Luka Lopusina
Luka Lopusina

Reputation: 2647

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>

Upvotes: 0

adam-beck
adam-beck

Reputation: 6009

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.

Upvotes: 1

Ilya Chernomordik
Ilya Chernomordik

Reputation: 30195

It's just

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

for the jsfiddle, or 

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

for the example here.

without {{}}

Upvotes: 2

Related Questions