CODEWITHSUNDEEP
angularjs
ytsejam
ytsejam

Reputation: 3439

angularjs ng--show is not working as expected

I am getting wrong behaviour with my ng-show directives. 

<span class="spanLabel" ng-show="!minimumCharactersMet()" >You need at least {{ howManyMoreCharactersNeeded() }} characters more</span>
<span class="spanLabel" ng-show="isNumberOfCharactersWithinRange()" >Remaining characters: {{ howManyCharactersRemaining() }}</span>
<span class="spanLabel warning" ng-show="anyCharactersOver()" >{{howManyCharactersOver()}} characters too many</span>

When I try to input a text span is counting from below to warn user of 2 characters minimum, countdown works and after stays there and does not hide. Also second one does not show.

Here is my plunker link with all the functions and html. Any ideas why I cant get it working?

Thanks

Upvotes: 0

Views: 88

Answers (2)

rlecaro2
rlecaro2

Reputation: 755

In addition to what @Reins said, the two other statements have these errors:

  • You're missing the same function-calling brackets on anyCharactersOver

  • The return statement in the howMany functions has a bracket error. It should be

    return ( characters < 0 ? Math.abs(characters) : 0);

  • Also, the return value of isNumberOfCharactersWithinRange should be:

    $scope.minimumCharactersMet() && !$scope.anyCharactersOver();

Plunker

PS: I'd use ng-hide instead of ng-show(!)

Upvotes: 1

Reins
Reins

Reputation: 1109

It seems as though your boolean is wrong. The minimumCharactersMet() boolean should call for a function on the scope. Like this:

$scope.minimumCharactersMet = function() {
    return ($scope.howManyMoreCharactersNeeded() === 0);
};

Notice the braces after the howManyMoreCharactersNeeded call. Otherwise it would be as if you were asking for a variable not a function.

working plnkr

Upvotes: 2

Related Questions