我正在尝试使用像按钮一样很棒的字体,在 true 或 false 的 bool 值上使用 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 文件中的代码:
.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
是否等于 bool 表达式,因为它是一个 bool 表达式。
关于javascript - AngularJS:Font Awesome Like 按钮未显示在 ng-show 下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35455856/