AngularJS:字体太棒了，就像按钮没有显示在ng-显示下面
AngularJS:字体太棒了，就像按钮没有显示在ng-显示下面
提问于 2016-02-17 11:47:53
我试图使用一个字体可怕的按钮，使用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");
}
}下面是我制作的plunk演示，我的挑战是，当我运行代码时，字体图标不会出现。拜托，我出什么错了？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-17 11:51:26
只需将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是否等于布尔表达式，因为它是一个布尔表达式。
Stack Overflow用户
发布于 2016-02-17 11:54:00
最初，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>由于未定义是falsey值之一，将传递第一个条件，并显示第一个图标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35455856
复制相关文章
相似问题
腾讯云开发者
