Display an icon when clicked using ng-click

Currently, I am delving into the world of Angular and facing a challenge in displaying an icon after triggering a function call using ng-click. I have attempted to use ng-if for this purpose but unfortunately, it did not yield the desired result. I would greatly appreciate any assistance or solution you may offer.

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

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

The issue lies within my ng-click function and I aspire to have the bookmark icon displayed upon its activation. How can I go about achieving this?

javascriptangularjs

Answer №1

To show or hide elements based on condition, you can use either ng-show or ng-if. ng-if removes the element from the DOM and adds it back according to your logic.

Example:

<li ng-click="toggleBookmark(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 set to false

  $scope.toggleBookmark = function() {
    $scope.showIcon = true; // toggle to true when bookmarked
  }
}]);

Answer №2

To simplify things, consider including a isBookmarked property in the question object. In your 

toggleBookmark(question) function
, toggle the value of this property by using 
question.isBookmarked = !question.isBookmarked
. Update your icon HTML to reflect this change:

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

Answer №3

One way to handle showing or hiding a bookmark is by having a flag inside the question object. Another option is to utilize ng-if or ng-show directives to manipulate the DOM.

Markup

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

Code

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

Answer №4

Implement the ng-show directive to toggle the display of an icon based on a condition. Below is a sample code snippet:

function ToggleBookmark($scope) {
  
  $scope.bookmark = false;
  
  $scope.toggle = 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="ToggleBookmark">
        <li>
            <i class="icon icon-bookmark" ng-show="bookmark">Bookmark</i><a ng-click="toggle(bookmark)"> click </a>
        </li>
    </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating custom validation in Vuetify for password confirmation is essential in ensuring that

While developing a Vue.js template, I encountered a scenario on the sign-up page where I needed to compare passwords during user registration. To achieve this, I implemented a custom validation rule in the code snippet below: <v-text-field label=" ...

javascriptvalidationvue.jsvuetify.js

What is the best way to use jQuery to wrap two elements while maintaining the integrity of their parent

I'm currently facing an issue with wrapping two elements in jQuery. Occasionally, there may be an invisible duplicate of the parent element present. When this happens, the element from the hidden div also gets wrapped in the visible one: jQuery(d ...

javascripthtmljquery

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

Sending information back to the server without causing a postback, all while remaining unseen

I have a straightforward JavaScript function on my ASP.NET page that writes data to a hidden field. However, in order to retrieve this data the form needs to be submitted back to the server. The issue is that submitting the form causes the page to reload ...

javascriptajax

Climbing the ladder of function chains, promises are making their

Here is the code structure that I've created to upload multiple files to a server using AJAX. After all the uploads are complete, it should perform a certain action. function uploadFiles(files){ const results = [] for (let i=0; i<files.length; i ...

javascriptajaxpromise

What could be causing these cards to not show up correctly?

I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...

cssangularjsangular-material

What is the process for using Discriminators, the Mongo DB API, and Mongoose to insert data into Cosmos DB?

Issue Overview I am currently facing a challenge in writing documents to my Cosmos DB using the Mongo DB API and Mongoose for Object Modeling. To optimize costs, I aim to store all documents in a single collection by utilizing Discriminators. The project ...

javascriptnode.jsmongooseazure-cosmosdb-mongoapidiscriminator

Utilizing Various Perspectives in Angular with the ng-view Directive

Can anyone assist me with a challenge I'm facing regarding views? While this is a hypothetical scenario and there's no code available to review... Let's imagine a simple site with three routes: /signin /users /users/:id Upon accessing t ...

javascriptangularjsurl-routingnested-views

Exploring the Art of Navigation with Ionic and Angular

Trying to integrate Angular, Meteorjs, and Ionic Framework has been a smooth process, thanks to the urigo:angular and urigo:ionic packages. However, I'm facing difficulties in configuring ionic links and angular routing to make it work seamlessly. Des ...

javascriptangularjsroutesionic-framework

The contrast between FormData and jQuery's serialize() method: Exploring the distinctions

Recently I came across a situation where I needed to submit a form using AJAX. While researching the most efficient method, I discovered two popular approaches - some developers were utilizing jQuery#serialize() while others were opting for FormData. Here ...

javascriptjqueryajaxform-data

How to choose elements using jQuery according to their CSS properties?

Seeking a solution to a unique challenge I've encountered. The website I frequent has found a way to bypass my uBlock extension by using a script that generates random element classes, such as: <div class="lcelqilne1471483619510ttupv"></div& ...

javascriptjquerycss

An unusual problem stemming from jQuery/AJAX arises when variables within a function fail to update while a click

I've been struggling with a small issue for the past three days that I just can't seem to resolve. It doesn't seem to be a coding error, but rather a misunderstanding of variables and why the onClick event isn't functioning properly. H ...

javascriptjqueryajax

Merge HTML documents with this powerful JavaScript library

Our team has developed an email generator that creates HTML emails based on specific parameters. Users can simply select or deselect options and the email will be regenerated accordingly. Occasionally, users may need to make minor manual changes to the co ...

javascripthtmlmerge

The MaterialTable component is indicating that there is no property called 'tableData' on the IPerson type

Incorporated an editable attribute to my MaterialTable component. Currently looking for a way to retrieve the index of updated or deleted items within the onRowUpdate and onRowDelete methods. To replicate the issue, refer to this minimal sandbox example: ...

javascriptreactjstypescriptreact-typescriptmaterial-table

Different approaches to creating mock filters for unit testing

In the Controller, there is a line that looks like this: var formattedDate= $filter('date')(dateColName,short); I am currently working on writing unit tests for this controller, but I'm unsure about how to properly mock the date filter in ...

angularjskarma-jasmine

Is it wise to question the validity of req.body in express.js?

https://expressjs.com/en/4x/api.html mentions It is crucial to validate all properties and values in the req.body object as they are derived from user input. Any operation performed on this object should be validated to prevent security risks. For instan ...

javascriptnode.jsexpress

ngResource is mistakenly handling POST requests as if they were GET requests

It has come to my attention that despite specifying "POST" in my ngResource factory, the parameters are actually being passed as GET. Here's an example of a user factory: myApp.factory('facUser',['$resource', function ($resource) ...

angularjspostsavefactoryngresource

Running tests in JavaScript that are similar to Python's doctests

Are there any JavaScript testing frameworks that offer a similar functionality to Python's doctest? function multiply(x, y) { /** Returns the product of `x` and `y`: > multiply(4, 3) 12 The function handles string inputs by convert ...

javascripttestingdoctest

Assetic in Symfony2 causing issues with AJAX requests

Recently, I encountered a strange issue while working on my Symfony2 application. The problem arose when I integrated assetic with the uglifyjs filter for JavaScript files. Everything functioned perfectly when the JavaScript files were included as individu ...

ajaxangularjssymfonyassetic

What is the best way to implement custom serialization for Date types in JSON.stringify()?

class MyClass { myString: string; myDate: Date; } function foo() { const myClassArray: MyClass[] = .... return JSON.stringify(myClassArray); // or expressApp.status(200).json(myClassArray); } foo will generate a JSON string with the date format o ...

javascripttypescript