角JS NG隱藏實時不起作用

Question

我有我想隱藏其HTML代碼段，如果變量$ scope.city是空的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> 

即使它們是綁定的元素不會實時隱藏，只有當我訪問那個已經有空的$ scope.city變量的頁面時，還有一個來自varService的變量城市（我用它來在多個控制器之間共享變量），這裏是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; }); 


}); 

}]）;

那麼我如何讓我的$ scope.city更改實時隱藏工作？謝謝。

Answer 1

而不是

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

寫這樣

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

city已經綁定到$scope在你的控制器，並ng-hide/ng-show期待的表情。所以你不需要使用{{}}評估爲真或假的表達式，只需要提供表達像這樣"city.length===0"

Answer 2

改變你的代碼中使用ng-if代替ng-hide，因爲ng-if不會創建元素的

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

Answer 3

試試這個;

ng-hide="city == ''"