2015-10-20 2 views
2

Я изучаю угловой, и я хочу показать значок после того, как ng-click вызвал вызов функции. как я могу это сделать? Я попробовал ng-if для этого, но не работал. , пожалуйста, предоставьте мне решение.Показать значок на ng-click

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

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

это мой нг щелчок, и я хочу значок закладки на щелчку функции. Как я могу это сделать?

+1

где вы хотите значок .. нравится быть немного более пояснительный – Minato

+0

@San использование нг-шоу директива, чтобы отобразить значок. при нажатии на ссылку set variable в true для отображения значка –

+0

самым простым решением было бы добавить атрибут bookmarked в ваш «объект вопроса», как в вашей функции 'bookmarked (question)', сделать что-то вроде 'question.bookmarked =! question.bookmarked 'и измените свой значок html на' ' – Minato

ответ

0

У вас может быть один флаг внутри объекта question, который будет представлять состояние показа, чтобы показать закладку или нет. ИЛИ вы могли бы использовать ng-if/ng-show, чтобы показать hide 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; 
} 
+0

@ Сэн это тебе помогло? –

1

использование ng-show или 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; 
    } 

}]) 
1

самым простым решением было бы добавить атрибут bookmarked в вашем question object как в вашем bookmarked(question) function сделать что-то вроде question.bookmarked = !question.bookmarked и изменить значок HTML до

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

инструкция по использованию 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>