CODEWITHSUNDEEP
javascriptangularjs
Mikail
Mikail

Reputation: 465

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

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.

Upvotes: 2

Views: 333

Answers (3)

svarog
svarog

Reputation: 9839

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".

Upvotes: 3

byteC0de
byteC0de

Reputation: 5273

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>

Upvotes: 1

erolkaya84
erolkaya84

Reputation: 1849

try this;

ng-hide="city == ''"

Upvotes: 1

Related Questions