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 等初始化为零或一，并且页面第一次加载时将适当的类插入到我的 div 中。但是，此后通过设置这些值的按钮进行的任何更改都不会通过 ng-class 反映在我的 class 属性上。

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

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

Answer 1

可能 ng-class 实现没有像您预期的那样将“0”视为 "false"，因为它正在与 ===.

进行严格比较

尝试这样表达条件：

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

Answer 2

尝试了您的变体。一切正常。请检查您的按钮单击事件是否在 $scope 上并且 AngularJS 知道，该值已更改。

例如，如果函数由原生 DOM 事件触发（某些 jQuery table 已更新或其他），那么您应该使用 $apply 函数，以反映作用域的变化。像这样：

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

同时，检查这个jsfiddle

更新： 请查看 this jsfiddle。这适用于 AngularJS 1.4.8，但不适用于其他支持 jsfiddle 的版本。据我所知，在表达式内部进行赋值并不是一个最好的主意，控制器就是为此而设计的。

Answer 3

我的一个解决方法是为 ng-class 切换操作模型变量：

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

上使用了这个额外的模型

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

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

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

因为你知道，一个最初为空的列表状态不等于一个被命令清空的列表。

Angular ngClass 没有更新我的类即使我的情况如预期的那样改变

Angular ngClass is not updating my classes even though my condition change as expected

javascript

html

angularjs

ng-class

Angular ngClass 没有更新我的 类 即使我的情况如预期的那样改变

Angular ngClass is not updating my classes even though my condition change as expected

javascript

html

angularjs

ng-class

Angular ngClass 没有更新我的类即使我的情况如预期的那样改变