angular js ng-hide in real time doesn't work

Question

I have a snippet of html which I'd like to hide if a variable $scope.city is empty html:

<div class="col-lg-12" **ng-hide="{{city === ''}}"**>
     <h1>{{forecast.data.city.country}} ,{{forecast.data.city.name}} </h1>
     <h2>Forcast for : {{city}}</h2>
</div>

<div class="col-lg-8">
    <div class="input-group">
     <span class="input-group-addon" id="basic-addon1">City@</span>
     <input type="text" **ng-model="city"** class="form-control" placeholder="Username" aria-describedby="  basic-addon1">
    </div>
</div>

even though they are bound the element does not hide in real time, only if I go to that page with already empty $scope.city variable , there is a one more variable city which comes from varService (I use it to share variable between multiple controllers) here is Angular Code:

app.controller('forecastController', ['$scope','varService','$http', function($scope,varService,$http){

$scope.$watch('city', function() {
    varService.city = $scope.city;
});  
$scope.city = varService.city;
$scope.numOfDays = 2;
$scope.days = 2;
$scope.$watchGroup(['days', 'city'], function() {   

        $http.get('http://api.openweathermap.org/data/2.5/forecast?q='+$scope.city+'&mode=json&appid=e652a2c384655ea24f5b12d2fb84c60f&cnt='+$scope.days+'&units=metric')
    .then(function(data) { $scope.forecast = data; });


});

}]);

so how do I make ng-hide work in real time as my $scope.city changes ? Thanks.

You don't have to use `{{}}`, it's already bound as an expression — Martijn Welker, Apr 21 '16 at 11:46
Thank you, It worked, but I still don't get it why should't I use {{}} ? — Mikail, Apr 21 '16 at 11:59
because anything under ng-hide or ng-click and so on.. is evaluated as an expression refer to this post http://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js — Mohsin Muzawar, Apr 21 '16 at 12:05
@Mikail Does not need to check city.length===0, just add !city.length , 0 is already false — byteC0de, Apr 21 '16 at 12:07

svarog · Accepted Answer · 2019-05-12T08:26:34.917

3

Instead of

ng-hide="{{city === ''}}"

Write it like this

ng-hide="city.length===0"

city is already bound to $scope in your controller, and ng-hide/ng-show expects an expression. so you don't need to use the double curly brackets({{}}) to evaluate it to true or false, just provide the expression as as like so "city.length===0".

edited May 12 '19 at 08:26

answered Apr 21 '16 at 11:42

svarog

9,477
4
61
77

byteC0de · Answer 2 · 2016-04-21T12:08:40.683

Change your code use ng-if instead of ng-hide, because ng-if does not create element

<div class="col-lg-12" ng-if="!city.length">
     <h1>{{forecast.data.city.country}} ,{{forecast.data.city.name}} </h1>
     <h2>Forcast for : {{city}}</h2>
</div>

OR

<div class="col-lg-12" ng-hide="city.length">
    <h1>{{forecast.data.city.country}} ,{{forecast.data.city.name}} </h1>
    <h2>Forcast for : {{city}}</h2>
</div>

score 1 · Answer 3 · answered Apr 21 '16 at 12:03

1

try this;

ng-hide="city == ''"

answered Apr 21 '16 at 12:03

erolkaya84

1,769
21
28

angular js ng-hide in real time doesn't work

3 Answers3