Angular ngClass 没有更新我的类，即使我的条件按预期发生了变化

Question

我在创建的模板中有这样的东西

<div ui-view id="app" class="nng-3" ng-class="{ 'app-mobile': app.isMobile, 'app-navbar-fixed': app.layout.isNavbarFixed, 'app-sidebar-fixed': app.layout.isSidebarFixed, 'app-sidebar-closed': app.layout.isSidebarClosed, 'app-footer-fixed': app.layout.isFooterFixed }"></div>

值 app.layout.isNavbarFixed 等初始化为零或 1，并且页面加载时，将适当的类插入到我的div中。但是，之后的任何更改，通过设置这些值的按钮，都不会反映在我的class属性上ng-class。

如果我直接在我的模板中打印这些变量，例如。 {{app.layout.isSidebarFixed}}我可以看到它们从true更改为false，反之亦然，但ng-class不会更新或删除任何新类。

我

不确定从哪里开始并为此寻找解决方案，因为以我有限的知识，我无法立即发现任何明显的错误。有没有人知道导致此问题的原因？

Answer 1

我的解决方法是仅为ng类切换操作模型变量：

1） 每当我的列表为空时，我都会更新我的模型：

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2）每当我的列表不为空时，我设置另一个状态

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3）我在我的ng类上使用这个附加模型：

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty'}"

更新*：如果需要，您还可以添加任何其他状态并在ng类中使用，例如：

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-additional-state', liststate == 'additional-state'}"

因为您知道，初始空列表状态不等于由命令清空的列表。

Answer 2

可能 ng class 实现并没有像你期望的那样将"0"视为"false"，因为它与 === 进行了严格的比较。

尝试像这样表达条件：

ng-class="{ 'app-mobile': app.isMobile == 0, 'app-navbar-fixed': app.layout.isNavbarFixed == 0, ... 

Answer 3

尝试了您的变体。让一切正常。请检查您的按钮点击事件是否在$scope并且 AngularJS 知道值是否发生了变化。

例如，如果函数由本机 DOM 事件触发（某些 jQuery 表更新或其他东西），那么你应该使用$apply函数来反映范围的变化。像这样：

$scope.eventHandler = function(e) {
  $scope.$apply(function(){ $scope.someProp = e.value;}
}

同时，检查此jsfiddle

更新：请检查此jsfiddle。这适用于AngularJS 1.4.8，但在其他支持jsfiddle的版本中不起作用。据我所知，在表达式内部进行赋值并不是一个最好的主意，控制器是为这件事准备的。