unable to apply angular measurement inside quotation marks

What is the reason for this issue:

<ul class="dropdown-menu">
  <li ng-repeat="choice in dropDownItems">
    <a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a>
  </li>
</ul>

However, this code works correctly:

<ul class="dropdown-menu">
  <li ng-repeat="choice in dropDownItems">
    <a class="btn" ng-click="mnuClick('xxx')">{{choice}}</a>
  </li>
</ul>

The problem in the first example is that the mnuClick() function is not being triggered, while in the second example it is. Even after 'inspecting element,' everything seems to be set up correctly.

Answer №1

The method you used won't work as intended because it implies that you are passing the string {{choice}} to the function mnuClick.

When using xxx, this is the correct approach and requires the use of quotes.

However, when using {{choice}}, you are not aiming for a literal string but rather for an evaluated expression whose outcome (most likely a string) should be passed as a parameter - therefore, in this case, the quotes (and even the curly braces) are unnecessary.

To simplify, one scenario involves dealing with an expression that results in a string, while the other involves working directly with a string. This is why quotes are required in one instance and not in the other.

To gain more insight into when to utilize curly braces and when to avoid them, refer to this answer to the question: Difference between double and single curly brace in angular JS?

I hope this explanation proves helpful.

PS: Within the text of your a tag, you must use the double curly braces since you are outside of an AngularJS controlled code-block, signifying that it is a binding operation; otherwise, it would just be considered plain text within HTML.

Answer №2

When using ng-click, the value is considered an angular expression and there is no need to include curly brackets around "choice". Simply write it in this format:

<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>

Answer №3

Is this the correct solution?

ng-click="mnuClick(choice)"

I have implemented a similar approach before, although I do not currently have access to the code to confirm...

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

The onChange function in React JS for a Material UI 'number' TextField retains the previous value

In this element, I have an onChange function: <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultRows = 1 inputProps={{ min: "1", max:"5"}} onChange= ...

I attempted to make changes to a Firebase document using the update() function, however, the document did not reflect

I am currently in the process of creating a blog and have been focusing on implementing an edit post feature. However, I have encountered an issue where when I utilize the ref.update() method, it indicates that the update was successful but I do not see an ...

retrieving JSON data using ajax and processing it in PHP

I have some data that needs to be sent to the backend, and it looks like this: function view(){ let id = "12345678"; let profile = [{name:"dave", department : "Engineering"}, {name:"Tedd", ...

JavaScript file creation and opening issue in Firefox

Check out my code snippet below: var blob = new Blob([data], { type: 'text/plain' }); var downloadLink = angular.element('<a></a>'); downloadLink.attr('href', window.URL.createObjectURL(blob)); downloadLink.attr ...

Converting XML schema to JSON format using Node.js

I am attempting to loop through or access keys of a JSON object that was created from an XML object in node.js. Here is my current code: var fs = require('fs'); var parser = require('xml2json'); var xsd = require('libxml-xsd&apos ...

Providing a callback function along with the specific execution context for it to be executed

myFn is a function that executes an asynchronous task and triggers the callback upon successful completion. SearchController.prototype.show = function (query) { this.searchService.myFn(arg1, this.myCallback); //I want to preserve the reference of `th ...

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

Step-by-step guide on building a mat-table with nested attributes as individual rows

Here is the data structure I am working with: const families = [ { name: "Alice", children: [ { name: "Sophia" }, { name: "Liam" ...

Remove the array element if the value is blank

I have an array with different objects, and I need to efficiently delete the entries where the name is empty, similar to the first and third object in the example below: var myArray = [ { "Name": "", "Value": "" }, { "Name": "aaa", "Value": "bbb" ...

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

Utilizing Vue to Embed Multiple Hubspot Forms on one Page

While working on a Vue page, I encountered an issue with loading multiple Hubspot forms simultaneously. Only one form would load at a time. Here is the code snippet I used to append a single Hubspot form: mounted() { const script = document.createElem ...

Tips for delaying the execution of a function in Angular.js until both datasets have finished loading

Using angular.js, I am loading data from two separate web services and need to match the two datasets once they are both ready. The two datasets in angular.js are defined as: $scope.myorders = []; $scope.catalogs = []; $http({ url: baseURL + "d ...

transmit data retrieved from `getStaticProps` to other static pages in NextJS

While working on my project, I encountered the task of fetching a large JSON dataset from an external API within the getStaticProps function. This dataset needs to be divided into multiple parts and passed as props to numerous static pages (potentially hun ...

AngularJS: Starting a $scope property in the right way

Check out my small angular code snippet below: html file: <body ng-controller="myCtrl"> <div class="container"> .... </div> </body> javascript file: app.controller('myCtrl', function($scope) { $scope.wh ...

Create an HTML container surrounding the content within the parent tags

I'm looking to create a wrapper that acts as the immediate parent of any HTML markup added within a shared class. This will eliminate the need to manually add multiple wrapper divs and allow for the customization of layouts and backgrounds. Essential ...

Steps to submit a JavaScript-generated output as the value in a form input field

I'm facing an issue that seems basic, but I can't seem to figure it out. I'm trying to create a binary string representing the 12 months of the year using 12 checkboxes: const checkboxes = [...document.querySelectorAll('input[type=check ...

Ways to access text content in an HtmlTableCellElement

I am currently working on a jQuery tic-tac-toe project and facing an issue with iterating through the board to save the values of each cell in an array. I have tried using .text() and .value(), but both returned undefined index.html: <html> < ...

before sending the url with fetch(url), it is adjusted

My front end code is currently fetching a URL from a local node.js server using the following snippet: fetch('http://localhost:3000/search/house') .then(.... Upon checking what is being sent to the server (via the network tab in Firefox dev ...

There is no way to convert a strongly typed object into an observable object using MobX

I have been utilizing the MobX library in conjunction with ReactJS, and it has integrated quite smoothly. Currently, I am working with an observable array structured as follows: @observable items = []; When I add an object in the following manner, everyt ...

Use jQuery to compare the input values whenever they are modified

I am trying to synchronize the input values of two inputs as they are typed in. The code I have seems to work sometimes, but not consistently. Here is the code snippet: $('#google-querynav').keypress(function() { var text = $(this).val(); ...