在 ng-click 上显示一个图标
[英]Show an icon on ng-click
问题描述
I am learning angular and I want to show an icon after ng-click triggered a function call.
我正在学习 angular，我想在 ng-click 触发函数调用后显示一个图标。 how can I do it?我该怎么做？ I have tried ng-if for this but its not working.我为此尝试了 ng-if，但它不起作用。 please provide me the solution.请为我提供解决方案。
<li ng-click="bookmark(question)"><a><i class="fa fa-bookmark"></i>Bookmark</a></li>
<i class="fa fa-bookmark"></i>
this is my ng-click and I want icon of bookmark on click of function.这是我的 ng-click，我想要点击功能时的书签图标。 How can I do it?我该怎么做？
4 个解决方案
解决方案1
1 2015-10-20 06:46:25
use ng-show or ng-if (ng-if removes the elements from dom and adds it according to your logic).使用ng-show或ng-if （ng-if 从 dom 中删除元素并根据您的逻辑添加它）。
Template模板
<li ng-click="bookmark(question)"><a ng-show="showIcon"><i class="fa fa-bookmark"></i>Bookmark</a></li>
controller控制器
app.controller('myCtrl',['$scope',function($scope){
$scope.showIcon = false; // initially false
$scope.bookmark = function(){
$scope.showIcon = true;
}
}])
解决方案2
1 2015-10-20 06:47:12
最简单的解决方案是在您的question object添加一个bookmarked属性，例如在您的bookmarked(question) function执行类似question.bookmarked = !question.bookmarked并将您的图标 html 修改为
<i ng-show = "question.bookmarked" class="fa fa-bookmark"></i>
解决方案3
0 2015-10-20 06:45:35
You could have one flag inside question object, that will represent state of to show bookmark or not.您可以在question对象中放置一个标志，代表是否显示书签的状态。 OR you could use ng-if / ng-show to show hide DOM.或者你可以使用ng-if / ng-show来显示隐藏 DOM。
Makrup马克鲁普
<li ng-click="bookmark(question)">
<a>
<!--<i class="fa" ng-class="{'fa-bookmark': question.isBookmarked }"></i>-->
<i ng-if="question.isBookmarked" class="fa fa-bookmark"></i>
Bookmark</a>
</li>
Code代码
$scope.bookmark = function(question){
//do other code here.
question.isBookmarked = true;
}
解决方案4
0 2015-10-20 07:13:23
use ng-show directive to display icon.使用 ng-show 指令显示图标。 i put sample code here.我把示例代码放在这里。
function MyCntrl($scope) { $scope.bookmark = false; $scope.isBookmark = function(bookmark){ if(bookmark) $scope.bookmark = false; else $scope.bookmark = true; } }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body> <div ng-controller="MyCntrl"> <li> <i class="icon icon-bookmark" ng-show="bookmark">Bookmark</i><a ng-click="isBookmark(bookmark)"> click </a> </li> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.