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中。之后的任何更改，通过设置这些值的按钮，都不会通过class反映在我的ng-class属性上。

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

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

Answer 1

可能ng-class实现没有考虑＆＃34; 0＆＃34;是＆＃34;假＆＃34;如你所料，因为它与===进行了严格的比较。

尝试表达这样的条件：

data:  { userattend: "<?php echo ($auth_user->is_attend()) ? true : false; ?>" }

Answer 2

尝试了你的变种。一切正常。请检查您的按钮点击事件是否在$ scope上，AngularJS知道这些值是否已更改。

例如，如果由本机DOM事件触发的函数（某些jQuery表更新或某些东西）比你应该使用$ 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也不会更新我的类

3 个答案: