Question

我有两个按钮，一次只能显示其中一个按钮。第一个称为“离线模式”，另一个称为“在线模式”。它们在HTML上显示如下：

<a ng-hide="offlineMode == true" ng-click="offlineMode()">Offline Mode</a> 
<a ng-show="offlineMode == true" ng-click="onlineMode()">Online Mode</a>

当我第一次点击“离线模式”时，它成功切换到“在线模式”按钮。当我点击“在线模式”之后，它会切换回“离线模式”。此后按钮变得不可点击。它不会进入函数内部。

JS：

$scope.offlineMode = function() {
    $scope.offlineMode = true;
    // do other things
};

$scope.onlineMode = function() {
    $scope.offlineMode = false;
    // do other things
};

Answer 1

您收到此错误，因为function和flag变量都具有相同的名称offlineMode

请参阅控制台以了解此错误：

v2.offlineMode is not a function

<强>修正：只需将布尔变量重命名为offline（或其他内容）

  $scope.offlineMode = function() {
      $scope.offline = true;
      // do other things
  };

  $scope.onlineMode = function() {
      $scope.offline = false;
      // do other things
  };

相应地更新html

<a href="#" ng-hide="offline" ng-click="offlineMode()">Offline Mode</a><br> 
<a href="#" ng-show="offline" ng-click="onlineMode()">Online Mode</a>

请注意ng-hide和ng-show中的更改。您不需要每次都使用offline评估true。

这里是demo

Answer 2

无需创建两个按钮和两个功能。你可以这样简单地做到这一点 -

<a ng-click="switchMode()">Switch Mode</a>

JS：

$scope.offlineMode = true;
$scope.switchMode = function() {
    $scope.offlineMode = !$scope.offlineMode;
};

如果您想更改按钮文本，可以这样做：

<a ng-click="switchMode()">
  <span ng-if="offlineMode">Online Mode</span>
  <span ng-if="!offlineMode">Offline Mode</span>
</a>

Answer 3

我无法解释为什么它不起作用，但考虑使用这种方法：

<a ng-click="toggle()">{{caption}}</a> 

$scope.online = true;
$scope.caption = 'Offline Mode';
$scope.toggle = function() {
  $scope.online = !$scope.online;
  $scope.caption = $scope.online ? 'Offline Mode' : 'Online Mode';
  if ($scope.online) {
    // do other things
  } else {
    // do other things
  }
}

使用ng-hide交互第二次ng-click不起作用

3 个答案: