在ng-click上顯示圖標

我正在學習angular，並且我想在ng-click觸發函數調用後顯示一個圖標。我該怎麼辦？我試過了，如果是這樣，但它不起作用。請爲我提供解決方案。在ng-click上顯示圖標

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

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

這是我的NG-點擊，我想對功能點擊書籤圖標的。我該怎麼辦？

來源

2015-10-20 San

你想要的圖標在哪裏..高興多一點煞費苦心 – Minato

@San使用NG-顯示指令來顯示圖標。當點擊鏈接設置變量爲true以顯示圖標 –

最簡單的解決方案是在你的'問題對象'中添加書籤屬性，就像你的'書籤（問題）'功能一樣''question.bookmarked =！question.bookmarked '並將你的圖標html修改爲'' – Minato

你可以在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; 
}

來源

2015-10-20 06:45:35

@San對你有幫助嗎？ –

使用ng-show或ng-if（NG-如果去除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; 
    } 

}])

來源

2015-10-20 06:46:25

最簡單的解決辦法是在你的question object在bookmarked(question) function添加bookmarked屬性喜歡做這樣的事情question.bookmarked = !question.bookmarked和修改圖標的HTML到

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

來源

2015-10-20 06:47:12 Minato

使用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>

來源

2015-10-20 07:13:23

在ng-click上顯示圖標

回答

相關問題