[英]AngularJS: Font Awesome Like Button not showing under ng-show
我正在尝试使用ng-show真棒按钮之类的字体,其布尔值为true或false。 这是我索引中的代码
<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我的挑战是,当我运行代码时,字体图标不会出现。 请问我怎么了?
您只需要将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>
由于undefined是一个假值,第一个条件将通过,并且将显示第一个图标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.