Question

我想使用Angular通过点击事件切换布尔值。这是我的代码

<div class="nav_mobile" ng-click="mobilestatus.navActive = (mobilestatus.navActive == false) ? true : false">
    <a href="" class="gradient-menu"></a>
</div>

<nav>
    <ul class="nav_mobile_list" ng-class="{active: mobilestatus.navActive}">
        <li><a ui-sref="about" ng-click="mobilestatus.navActive = false">About</a></li>
        <li><a ui-sref="contact" ng-click="mobilestatus.navActive = false">Contact</a></li>
    </ul>
</nav>

控制器看起来像这样

angular.module('app').controller('NavCtrl', function ($scope){
   $scope.mobilestatus = {navActive: false};
});

我也试过其他速记符号。 navActive的初始值为false。 ng-click上的nav_mobile第一次使navActive属性为true，但再次点击时，它不会返回false。单击li项时，navActive会返回false。任何建议都表示赞赏。

Answer 1

试试这句话

ng-click="mobilestatus.navActive = !mobilestatus.navActive"

修改

如果您不知道代码中发生了什么，请尝试调试它。使用函数调用而不是angular的DOM表达式和日志输出到控制台。您也可以使用断点。

HTML

ng-click="toggle()"

控制器

$scope.toggle = function toggle() { $scope.mobilestatus.navActive = !$scope.mobilestatus.navActive; console.log('Status is ' + $scope.mobilestatus.navActive); };

您将看到此代码是否可执行，并且$ scope.mobilestatus可用于html部分。

修改

这是plunker

Answer 2

检查this解决方案：

<div class="nav_mobile" ng-click="mobilestatus.navActive = !mobilestatus.navActive">
    <a href="" class="gradient-menu">Test- {{mobilestatus.navActive}}</a>
  </div>

  <nav>
    <ul ng-class="{'active': mobilestatus.navActive, 'inactive': mobilestatus.navActive}">
      <li><a ui-sref="about" ng-click="mobilestatus.navActive = !mobilestatus.navActive">About</a></li>
      <li><a ui-sref="contact" ng-click="mobilestatus.navActive = !mobilestatus.navActive">Contact</a></li>
    </ul>
  </nav>

ng-click切换仅适用于第一次单击

2 个答案: