实时js ng-hide隐藏不起作用

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代码：

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变化时，如何使ng-hide实时工作？ 谢谢。

Answer 1

代替

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

这样写

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

city已绑定到控制器中的$scope ，并且ng-hide/ng-show需要一个表达式。 因此，您无需使用双大括号（ {{}} ）将其评估为true或false，只需像"city.length===0"这样提供表达式"city.length===0" 。

Answer 2

更改代码使用ng-if而不是ng-hide ，因为ng-if不会创建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>

要么

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