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以某种方式评估来自validate（）函数的值并基于＆＃34; if＆＃34;声明再次显示一个或另一个。例如，如果验证结果超过50％，那么它将显示Print Doc，如果低于50％，则只显示重试按钮。

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

Answer 1

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

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

在控制器中：

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

这样，＆＃34;重试＆＃34;如果$scope.validate()的结果高于50％，按钮将隐藏。

Answer 2

在validate（）内部使用您喜欢的任何逻辑设置两个变量，例如

$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>

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

3 个答案: