javascript - using ng-hide to displayhide buttons based on a condition - Stack Overflow

admin管理员组

文章数量:1397199

I have three buttons in my mark-up two of which are currently being hidden. Like this:

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

Now what I need to do is for ng-hide to somehow evaluate the value ing from the validate() function and based on an "if" statement show one or the other again. For instance, if the result from the validate was more than 50% then it would show Print Doc, and if less than 50% then it would only show the button for Retry.

Just how would I attach the HTML portion of it to my .js file?

I have three buttons in my mark-up two of which are currently being hidden. Like this:

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

Now what I need to do is for ng-hide to somehow evaluate the value ing from the validate() function and based on an "if" statement show one or the other again. For instance, if the result from the validate was more than 50% then it would show Print Doc, and if less than 50% then it would only show the button for Retry.

Just how would I attach the HTML portion of it to my .js file?

• javascript
• angularjs

Share Improve this question Follow asked Mar 31, 2015 at 19:32 Varvara JonesVarvara Jones 79122 gold badges88 silver badges2626 bronze badges 1

• Depending on the exact return value of validate, something like ng-show="validate() > .5" – tymeJV Commented Mar 31, 2015 at 19:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

It's best to have a function on your scope that will return a boolean according to your condition, especially when your conditions get more plicated. You can have the condition on your controller or use parameters:

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

And in the controller:

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

This way, the "Retry" button will hide if the result from $scope.validate() is higher than 50%.

Inside validate() set two variable using whatever logic you like, e.g.

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

then in your html

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

you could initialise them both to false in your controller also when you want to hide them again to rerun validate.

I remend not using a gradient but using explicit states. In your validate function you should set a variable

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

  $scope.status == validationResult;
}

Then set your ng-hides based on the status:

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

本文标签： javascriptusing nghide to displayhide buttons based on a conditionStack Overflow