Mikail Mikail - 6 months ago 6
Javascript Question

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

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() {

.then(function(data) { $scope.forecast = data; });



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


Instead of

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

Write it like this


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