使用ng-hide根据条件显示/隐藏按钮

Question

我有三个按钮在我的标记，其中两个目前正在隐藏。如下所示：

<button ng-click="validate()">Submit</button><br />
<button id="retryquiz" ng-hide="true" onclick="location.reload(true);">Retry</button>
<button id="getCertificate" ng-hide="true" onclick="printDoc()">Print Doc</button>

现在，我需要做的是让ng-hide以某种方式计算value ()函数的值，并基于"if“语句再次显示其中一个或另一个。例如，如果验证的结果超过50%，那么它将显示Print，如果小于50%，它将只显示用于重试的按钮。

我将如何将它的HTML部分附加到我的.js文件？

Answer 1

最好在您的作用域上有一个函数，它将根据您的条件返回布尔值，特别是当条件变得更加复杂时。您可以在控制器上设置条件或使用参数：

<button id="retryquiz" ng-hide="hideRetry()" onclick="location.reload(true);">Retry</button>

在主计长中：

$scope.hideRetry = function () {
    return $scope.validate() >= 50;
}

这样，如果$scope.validate()的结果高于50%，“重试”按钮就会隐藏。

Answer 2

使用您喜欢的任何逻辑设置两个变量。

$scope.showRetryButton = result < 0.5
$scope.showCertificateButton = result > 0.5

然后在html中

<button id="retryquiz" ng-show=showRetryButton ....
<button id="getCertificate" ng-show=showCertificateButton ...

您也可以在您的控制器中将它们初始化为false，当您想再次隐藏它们以重新运行验证时。

Answer 3

我建议不要使用渐变，而是使用显式状态。在验证函数中，应该设置一个变量。

$scope.validate = function(){
  //some work...

  $scope.status == validationResult;
}

然后根据以下状态设置ng-hide：

<button id="retryquiz" ng-hide="status=='retry'" onclick="location.reload(true);">Retry</button>
<button id="getCertificate" ng-hide="status=='print'" onclick="printDoc()">Print Doc</button>