Using a .NET Web-API controller variable as a parameter in a JavaScript function

I am looking to send a "variable" from the controller to a JavaScript function. The code I have implemented is as below:

<div ng-controller="faqController">

    <div ng-repeat="c in categories">
        <h2 onclick="toggle_visibility('quest{{c.catID}}')">{{c.name}}</h2>
        <ul id="quest{{c.catID}}" class="" ng-repeat="q in questions | filter:{ catID: c.catID}" style="display:none">
            <li>{{q.quest}}</li>
       </ul>
   </div>

The issue arises in the <h2> onclick where {{c.catID}} does not get converted into a number, unlike in the id of <ul>. So, my query is, how can I change quest{{c.catID}} to become quest[number]?

Answer №1

I have a feeling that if you eliminate the single quotes, this value would display as a numeric value.

<h2 onclick="toggle_visibility(@quest{{c.catID}})">{{c.name}}</h2>

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

Retrieving information from a JSON object in Angular using a specific key

After receiving JSON data from the server, I currently have a variable public checkId: any = 54 How can I extract the data corresponding to ID = 54 from the provided JSON below? I am specifically looking to extract the values associated with KEY 54 " ...

Managing errors in AngularJS via global $http event handling

I am in need of a way to globally intercept specific error scenarios involving $http requests, so that controllers do not have to handle these errors individually. I believe using an HTTP interceptor is the solution, but I am unsure how to prevent controll ...

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

In my current project, I am utilizing JavaScript to determine the length of a path and apply half of that length to the stroke-DashArray. However, I have encountered an issue as I am using vector-effect="non-scaling-stroke" in order to maintain a consisten ...

GAS: What strategies can I implement to optimize the speed of this script?

I have a sheet with multiple rows connected by "";" and I want to expand the strings while preserving the table IDs. ID Column X: Joined Rows 01 a;bcdfh;345;xyw... 02 aqwx;tyuio;345;xyw... 03 wxcv;gth;2364;x89... function expand_j ...

The alignment of the navigation menu disrupts the functionality of the dropdown sub-menus

I'm finding it challenging to center the navigation menu while maintaining the functionality of the drop-down li elements. Here is my demo: http://jsbin.com/tosayosino/1/edit?html,css,js,output Removing the float:left; property from .jetmenu li succ ...

Unable to Retrieve HTML Element by TagName using VB

I am currently working on a project in VB that involves retrieving elements by tag names, similar to what I used to do in VBA. However, I am facing challenges as my code seems to freeze after opening a new browser window. Public ie As New SHDocVw.Intern ...

What is the best way to create a variable in a React component that requires asynchronously loaded data in order to be functional?

While I have a good understanding of passing data from one component to another using this.props, I am encountering difficulty in asynchronously fetching and storing values, such as from a database, that need to be accessed throughout the component. The ch ...

Error in Compiling HTML Elements Collection<<Element>

Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a s ...

How to perfectly center a dropdown menu using CSS across different web browsers

I am dealing with a dropdown menu that is auto-generated by WordPress, so altering the HTML structure is not an option. However, I have the flexibility to adjust the CSS styling to correct an alignment issue in my dropdown menu. Currently, I'm facing ...

Using the ref callback to access getBoundingClientRect values in React Components

I'm having some trouble extracting data using the getBoundingClientRect() method from a set of animated div elements. The issue I'm facing is that the refCallback function is returning empty DOMRect objects. If you're interested, feel free t ...

What is the best way to retrieve my data/json from req.body in Express?

Recently, I started working with node.js and encountered an issue while trying to access JSON data on my node.js server through a post request. The goal is to send this data to an API and then pass it back to my front-end JavaScript file. Despite being abl ...

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples ...

Encountering an issue with MUI 5 where it is unable to access properties of undefined when utilizing makestyles

I recently finished building a react app using MUI-5 and everything was running smoothly. However, I've encountered a strange issue where my app refuses to start and I'm bombarded with multiple MUI errors. These errors started popping up after I ...

Obtaining the current value with each keystroke

While working with vue.js, I'm building a table that contains an input field called quantity. However, when I start typing the first word, it shows 'empty' on the console. If I type 3, it displays empty; and if I type 44, it prints 4. I am ...

Alert: Refs cannot be assigned to function components. Any attempt to access this ref will result in failure. Have you considered using React.forwardRef()? displayed in the @Mui Component

Is anyone familiar with this particular component? <Controller control={control} {...register("DOB", {})} render={({ field }) => ( <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker ...

difficulty in obtaining information submitted through a form

I'm having an issue with my contact form. I tried testing to see if I can retrieve the values from the form, but it's giving me back: name: undefined I'm not sure why it's not working! Here is the code for the form: <form met ...

Issues with launching NPM Start (Having trouble with Node on Mac OS X Yosemite)

As a Rails developer, I decided to expand my skills by learning Angular JS. I came across this tutorial that seemed interesting, but I'm stuck at trying to get a node server to run. Here is the content of the npm-debug.log file: 0 info it worked if ...

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

The data retrieved from the web API is not undergoing the necessary conversion process

I am facing an issue with a web API call where the property checkNumber is defined as a double on the API side, but I need it to be treated as a string in my TypeScript model. Despite having the property defined as a string in my model, it is being receive ...

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...