AngularJS:字体真棒喜欢按钮未显示在ng-show下

AngularJS: Font Awesome Like Button not showing under ng-show

本文关键字：显示 ng-show 按钮 喜欢 字体 AngularJS      更新时间：2023-09-26

我正在尝试使用一种很棒的字体，例如按钮，在 true 或 false 的布尔值上使用 ng-show。这是我索引中的代码

<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");
            }
        }

这是我制作的 plunk 演示https://plnkr.co/edit/Zhxmmmypkypd95gXYrzx?p=preview我的挑战是，当我运行代码时，字体图标不会出现。请问我做错了什么？

你只需要将你的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 是否等于布尔表达式，因为它是布尔表达式。

最初没有

设置hasLikedUser，因此将未定义，因此== true或==false检查都不会通过。 更改您的条件以仅检查真实或虚假：

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

由于未定义是 false 值之一，因此第一个条件将传递并显示第一个图标。

相关文章：