angularJS ng-show ng-hide and $scope string = yes, no, on, off

今天下午踩到一個 angularJS 神奇坑洞，事情是這樣滴當 $scope 內容為 string YES 的時候 ng-show 遽然不會動作 O_o”

sample Code:

in controller

1
$scope.test = 'yes';

in HTML

1
<span ng-show="test">test!</span>

ng-show 裡面綁定 $scope.test 並存在 value: ‘yes’, 為什麼 卻不會 show 哩？

以下是一連串的實驗與驗證：

DEMO: (可以切換右邊 Code 觀看 source Code)

範例1. $scope.test2 = ‘NOO’

ng-show 可以正常判斷 test2 存在 value 因此顯示

範例2. $scope.test = ‘NO’

ng-show 無法判斷 test 轉型 boolean

範例3. 測試 $scope.test ? ‘true’ : ‘false’;

透過簡單的 if else 測試 test 是否有 value?
結果是true O_o”

範例4. 在 ng-show 當中加入判斷

1
ng-show = "test ? true : false"

結果：可以正常顯示

因此向許多前輩請教後發現 AngularJS 將:

  • Yes 視為 true
  • No 視為 false

O_o”

在下面的 more test 範例將測試 ng-show 與 ng-hide在 $scope 變數內容為 string: yes, no, on, off 的小實驗。
實驗後 on, off 結果還是怪怪的，可能還要看下文章..

小結：

  • 踩雷真的好好玩 O_o”
  • 盡量避開使用語意化的變數內容: yes, no, on, off (已知)

Reference:

印象在學習 angularJS 初期有看過類似文章，可是一時找不到..日後補上哩 ^_^