爲什麼使用ng-hide時ng-show可以適用於這兩種情況

我已經經歷了很多問題，如this，但得到這個唯一的解決方案，ng-show默認隱藏該元素，並顯示它，如果條件爲真，另一方面ng-hide默認顯示該元素，並在條件爲真時隱藏它。爲什麼使用ng-hide時ng-show可以適用於這兩種情況

但我擔心的是可以採取與ng-show或ng-hide照顧的條件只有那麼我們爲什麼使用不同的東西。

例如

我看到這個地方在此代碼用戶使用ng-show和ng-hide都

<div ng-init="isShow = 'one'"> 
    <a href="#" ng-click="isShow == 'one' ? isShow = 'two' : isShow = 'one'"> 
    <div ng-show="isShow=='one'"> 
     If One show this 
    </div> 
    <div ng-hide="isShow=='one'"> 
     If Two show this 
    </div> 
</div>

但根據我這也可以使用此代碼

<div ng-init="isShow = 'one'"> 
    <a href="#" ng-click="isShow == 'one' ? isShow = 'two' : isShow = 'one'"> 
    <div ng-show="isShow=='one'"> 
     If One show this 
    </div> 
    <div ng-show="isShow=='two'"> 
     If Two show this 
    </div> 
</div>

實現

那麼兩個代碼之間的區別究竟是什麼。如果ng-show和ng-hide均存在，則必須存在一些具體差異。任何人都知道嗎？

在此先感謝！

來源

2016-08-22 Gaurav Aggarwal

兩者都不應該工作，因爲JavaScript是區分大小寫的語言，「Two''永遠不會等於」two「 – Satpal

我看不出有什麼理由要這個問題downvoted - 這是一個有效的想法。不過，原因很簡單。 AngularJS將「陳述式」作爲其核心理念之一。如果90％的時間你想要一個元素顯示，但偶爾它應該隱藏，ng-hide="thatcondition"清楚地表明它應該是什麼時候應該是hdiden。如果大部分時間應該是HIDDEN，那麼ng-show="thatrarecondition"更具可讀性。

清晰可讀的代碼是任何框架中的重要原則，特別是在AngularJS中。!運營商很窄，很容易被忽略，遠遠超過其他任何比較，比如>, <, >=, <=等。提供正面和負面的可見性運營商使得它更容易理解這裏發生了什麼。

需要注意的一個重要細節是，兩個指令都尋找「真值」，而不是完全相同的值。 JS對此非常模糊，有時這是一個優勢。例如，假設您有一個可能有子對象（一個細節元素）的對象。

<div ng-show="{{ object.details }}"> 
    <!-- Render object.details here --> 
</div>

這種「truthy」的比較也是得心應手的負面情況：你可以像下面所寫的細節顯示DIV。假設您希望在訂單已發貨的情況下隱藏銷售系統中的訂單取消區塊。考慮：

<div ng-hide="{{ order.shipped }}"> 
    Want to cancel this order? <a href="...">click here</a> 
</div>

爲什麼這很重要？那麼，這意味着任何非定義/空值order.shipped將隱藏此塊！這意味着如果今天，你把它設置爲真/假，它會起作用。但是明天你將它改爲訂單發貨日期？該規則仍然有效！這樣可以很容易地編碼（和維護）這樣的顯示。

來源

2016-08-22 06:15:34

這實際上很不錯，在文檔中有所解釋。 AngularJS ngShow

下面是來自文檔報價道：「ngShow指令顯示或隱藏在指定的HTML元素基於提供給所述ngShow屬性表達的元件是通過移除或添加這裏的ng隱藏CSS類顯示或隱藏。到AngularJS中預定義了.ng-hide CSS類，並將顯示風格設置爲none（使用！重要標誌）。「

關於ngHide：AngularJS ngHide

引用：「該ngHide指令顯示或隱藏基於提供給所述ngHide屬性表達給定的HTML元素的元素是通過移除或添加的ng-hide CSS類到顯示或隱藏。該元素.ng-hide CSS類在AngularJS中預定義，並將顯示樣式設置爲none（使用！重要標誌）。「

還檢查了這個約不同的角度DOM處理短，但準確的解釋：http://www.w3schools.com/angular/angular_htmldom.asp

那麼到底他們實際上做同樣的事情。據我所知，你不應該結合使用它們。如果你想創建多個布爾值作爲參數給它們中的任何一個，你可以這樣做：<div ng-show="value1 && !value2">Something</div>。不過我建議如果你需要更多的參數值，你應該使用一個函數。

<div ng-show="ShowMe()">Content</div> 

$scope.ShowMe = function(){ 
    return $scope.value && !$scope.value2; 
}

來源

2016-08-22 06:07:59 chrisv

爲什麼使用ng-hide時ng-show可以適用於這兩種情況

回答

相關問題