AngularJS：字體真棒像按鈕不顯示下ng顯示

我想用一個字體真棒像按鈕使用ng-show布爾值true或false。這裏是我的索引AngularJS：字體真棒像按鈕不顯示下ng顯示

<p ng-controller="DivCtrl2" style="background-color:red"> 
     Here is red 
<div ng-show="hasLikedUser == false" class="tab-item" ng-click="toggleLikeUserPage()"> 
<i class="fa fa-thumbs-o-up" style="font-size: 2em; float:left; padding-left: 16px; margin-top:12px " ></i> 
</div> 

<div ng-show="hasLikedUser == true" class="tab-item" ng-click="toggleLikeUserPage()"> 
<i class="fa fa-thumbs-up" style="font-size: 2em; float:left; padding-left: 16px; margin-top:12px " ></i> 
</div> 
    </p>

下面的代碼是在我的控制文件中的代碼：

.controller('DivCtrl2', function($scope) { 
$scope.toggleLikeUserPage = function() 
     { 

      if($scope.hasLikedUser){ 
       $scope.hasLikedUser = false; 
     alert("This is false"); 
      } else{ 
       $scope.hasLikedUser = true; 
     alert("This is true"); 
      } 

     }

這裏是普拉克演示中，我取得了 https://plnkr.co/edit/Zhxmmmypkypd95gXYrzx?p=preview 我面臨的挑戰是，當我運行代碼字體圖標不會出現。請問我錯了什麼？

來源

2016-02-17 Blaze

你只需要改變你的ng-show語句從ng-show="hasLikedUser == false"到ng-show="!hasLikedUser"，並從ng-show="hasLikedUser == true"到ng-show="hasLikedUser"。您的模板將如下：

<div ng-show="!hasLikedUser" class="tab-item" ng-click="toggleLikeUserPage()"> 
    <i class="fa fa-thumbs-o-up" style="font-size: 2em; float:left; padding-left: 16px; margin-top:12px " ></i> 
</div> 

<div ng-show="hasLikedUser" class="tab-item" ng-click="toggleLikeUserPage()"> 
    <i class="fa fa-thumbs-up" style="font-size: 2em; float:left; padding-left: 16px; margin-top:12px " ></i> 
</div>

你並不需要測試，如果hasLikedUser等於一個布爾表達式，因爲它是一個布爾表達式。

來源

2016-02-17 11:51:26 gtlambert

最初hasLikedUser沒有設置，所以未定義，所以== true或== false檢查都不會通過。改變你的情況，以剛truthy或falsy：

<div ng-show="!hasLikedUser" class="tab-item" ng-click="toggleLikeUserPage()"> 
    <i class="fa fa-thumbs-o-up" style="font-size: 2em; float:left; padding-left: 16px; margin-top:12px " ></i> 
</div> 

<div ng-show="hasLikedUser" class="tab-item" ng-click="toggleLikeUserPage()"> 
    <i class="fa fa-thumbs-up" style="font-size: 2em; float:left; padding-left: 16px; margin-top:12px " ></i> 
</div>

爲未定義是falsey的一個值的第一個條件會過去，第一個圖標將顯示。

來源

2016-02-17 11:54:00 DoctorMick

也謝謝。只是不能接受兩個答案 – Blaze

AngularJS：字體真棒像按鈕不顯示下ng顯示

回答

相關問題