Question

我正在学习角度，我想在ng-click触发函数调用后显示一个图标。我该怎么做？我已经尝试过ng-if for this但它不起作用。请给我解决方案。

＆＃13;

<li ng-click="bookmark(question)"><a><i class="fa fa-bookmark"></i>Bookmark</a></li>

＆＃13;

<i class="fa fa-bookmark"></i>

＆＃13;

这是我的点击，我想点击功能书签的图标。我该怎么办？

Answer 1

使用ng-show或ng-if（ng-if从dom中删除元素并根据您的逻辑添加它）。

<强>模板

<li ng-click="bookmark(question)"><a ng-show="showIcon"><i class="fa fa-bookmark"></i>Bookmark</a></li>

<强>控制器

app.controller('myCtrl',['$scope',function($scope){

   $scope.showIcon = false; // initially false

   $scope.bookmark = function(){
     $scope.showIcon = true;
   }

}])

Answer 2

最简单的解决方案是在bookmarked中添加question object属性，就像在bookmarked(question) function中添加类似question.bookmarked = !question.bookmarked之类的内容，并将您的图标html修改为

<i ng-show = "question.bookmarked" class="fa fa-bookmark"></i>

Answer 3

你可以在question对象中有一个标志，表示是否显示书签的状态。或者您可以使用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>

<强>代码

$scope.bookmark = function(question){
   //do other code here.
   question.isBookmarked = true;
}

Answer 4

使用ng-show指令显示图标。我把示例代码放在这里。

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>

在ng-click上显示一个图标

4 个答案: