使用ng-hide根據條件顯示/隱藏按鈕

我的標記中有三個按鈕，其中兩個當前處於隱藏狀態。就像這樣：使用ng-hide根據條件顯示/隱藏按鈕

<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隱藏以某種方式評估從的validate（）函數來和一個「如果」的聲明顯示一個或另一個同樣基於的價值。例如，如果驗證結果超過50％，則會顯示Print Doc，如果小於50％，則只顯示Retry按鈕。

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

來源

2015-03-31 Varvara Jones

取決於'validate'的確切返回值，類似'ng-show =「validate（）> .5」' – tymeJV 2015-03-31 19:34:39

最好在您的作用域上有一個函數，根據您的情況返回布爾值，特別是當您的條件變得更加複雜時。你可以對你的控制器或使用參數的條件：

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

和Controller：

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

這樣一來，「重試」按鈕，將隱藏如果從$scope.validate()結果高於50 ％。

來源

2015-03-31 19:40:54

但是初始狀態呢？重試不應該在開始時顯示。 – 2015-03-31 19:42:50

@DavidGrinberg這只是一個語法解釋和方法，因爲他顯然在尋找這個。然後，他可以選擇使用他認爲合適的任何邏輯。 – 2015-03-31 19:44:13

謝謝！切換到ng-show而不是ng-hide時完美工作。 – 2015-03-31 19:58:19

我推薦不使用漸變，但使用顯式狀態。在您的驗證功能，您應該設置一個變量

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

    $scope.status == validationResult; 
}

然後根據情況設置你的ng-hide S：

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

來源

2015-03-31 19:41:41

謝謝！我也會嘗試你的方法！ – 2015-03-31 19:59:42

裏面的validate（）兩個可變使用任何你喜歡的邏輯，例如設置

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

然後在你的HTML

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

你可以將它們初始化都在你的控制假也，當你想再次隱藏他們重新運行驗證。

來源

2015-03-31 19:47:31 RoyTheBoy

非常感謝。我會嘗試你的方法，看看有多少種方法可以工作，以便我可以學習新的東西。 – 2015-03-31 20:00:05

使用ng-hide根據條件顯示/隱藏按鈕

回答

相關問題