Unexpected display of AngularJS data enclosed within double quotes

Hello,

I am working on a basic angularjs app and trying to understand some fundamentals. I came across a concept in a book that states even when an angular data is enclosed between double quotes, it will display as expected. So, I decided to test it out with the following code:

<table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Fname</th>
                                <th>Mname</th>
                                <th>Lname</th>
                                <th>Qualifier</th>
                                <th>Alias</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="i in person">

                            <tr>
                                <td>{{i.fname}}</td>
                                <td>{{i.mname}}</td>
                                <td>{{i.lname}}</td>
                                <td>{{i.qualifier}}</td>
                                <td>{{i.alias_}}</td>
                                <td><a href="/ViewInfo/{{i.pid}}"><i class="fa fa-pencil-square-o"></i>View Information</a></td>
                            </tr>
                        </tbody>
                    </table>

I noticed that in the line where it says 'View Information', the pid is enclosed between double quotes and the application works fine. However, when I click the link, instead of opening 'ViewInfo/pid', the pid part is missing.

Is there something I am overlooking?

Thank you for your help!

Answer №1

To achieve this in angularjs, it is necessary to utilize the ng-href directive

<a ng-href="/ViewInfo/{{i.pid}}">...

According to the documentation:

When using Angular markup like {{hash}} in an href attribute, the link may lead to an incorrect URL if clicked before Angular has replaced the {{hash}} markup with its actual value. Prior to Angular updating the markup, the link will be broken and likely result in a 404 error. The ngHref directive resolves this issue.

For more information, visit https://docs.angularjs.org/api/ng/directive/ngHref

Answer №2

It should be noted that the issue at hand is not related to ngHref, as indicated in the approved response, but rather with how you are attempting to utilize the bound variable.

The following approach would have been successful:

<a href="/ViewInfo/{{i.pid}}">

Your challenge stemmed from concatenating strings instead of directly inserting the value into the quoted attribute in the href element.

Nevertheless, it is recommended to exercise caution and follow the best practices by employing ngHref as demonstrated in the endorsed reply.

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

What is the best way to programmatically route or navigate to a specific route within a Next.js class component?

tag: In the process of creating my app with next.js, I primarily use functional components. The sole exception is a class component that I utilize to manage forms. Upon form submission, my goal is to redirect back to the home page. However, when I attemp ...

Error encountered when using the module export in Node.js

I have a file named db.js which contains the following code: var mysql = require('mysql2'); var mysqlModel = require('mysql-model'); var appModel = mysqlModel.createConnection({ host : 'localhost', us ...

Counting the number of key-value pairs for a specific key in a JSON data can be achieved by implementing

Is there a way to determine if __metadata and ItemToEkbeNav are the root elements for their children who have key-value pairs? I've attempted various methods such as Object.keys().length and Array.isArray(), but haven't been able to retrieve the ...

unable to retrieve correct value upon click

Within my setup, there exists a slider with accompanying left and right buttons. Two event handlers are present for each button as demonstrated in the code below. Upon clicking and allowing the transition to complete its process, everything functions corr ...

Should I include one of the dependencies' dependencies in my project, or should I directly install it into the root level of the project?

TL;DR Summary (Using Lodash as an example, my application needs to import JavaScript from an NPM package that relies on Lodash. To prevent bundling duplicate versions of the same function, I'm considering not installing Lodash in my application' ...

I am experiencing issues with the jQuery function within my MVC Application

When working on my MVC application, I encountered an issue where the onclick function was not functioning as expected. @section Scripts{ <script src="~/Scripts/plugins/toastr/toastr.min.js"></script> <script> $(document). ...

Issue encountered with my AJAX request in JavaScript on Internet Explorer 8

Check out the range of products available on this website using jQuery When using Firefox or Safari, clicking on view will show you more product details on the right side. This could include a gallery with multiple images, downloadable spec sheets if av ...

Sorry, there was an issue: $controller:ctrlreg The controller you are trying to access is not registered

I'm currently watching a tutorial on AngularJS from safaribooks, following Lesson 3.1. Even though my code matches the one in the video, I'm encountering the error mentioned in the title. Below is my code: <html ng-app> <head> <l ...

Google Chrome on mobile devices is failing to send cookies

I created a basic Express.js server that simply sets a cookie called hello-world and returns the request headers. Take a look at the code snippet below: const app = require('express')() app.get('/', (req, res) => { res.cookie(&apo ...

Is there a way to trigger an angular function from an Android button when it is clicked?

Trying to incorporate an angular function into an Android application using webView.LoadUrl. The Android activity code being used is as follows: webView = (WebView) findViewById(R.id.webView1); webView.getSettings().setJavaScriptEnabled(true); webVi ...

Struggling to maintain the value of my variable outside of the getJSON function

Hello, I'm currently facing an issue with this code. The problem lies in the fact that the first console.log(smile_per_sec) outputs the correct value I require, but the second one displays the value I initially assigned to it when declaring the variab ...

Opting out of accents in the Vue filter and utilizing the table filter feature provided by Bootstrap-Vue

I am currently utilizing the Bootstrap-vue Table for filtering purposes, and I require assistance in implementing a regex filter to exclude words or letters with accents. Here is the regex snippet: string.replace('/[áàãâä]/ui', 'a&apos ...

What is the process of extracting a URL and inputting it into a form to enhance

Can anyone help with extracting a specific value (TEXT) from a URL and automatically paste it into an input form field? For example, if the URL is domain.com/page?code=123abc, I need to grab the code (in this case, 123abc) and have it automatically popula ...

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

How can I use CSS3 to design a unique custom shape that fits this specific style?

I have some detailed graphs, but I want to display them using CSS shapes. I've been attempting to create css3 shapes that match my graphics (see attached image), but without success. How can I replicate these graphics? https://i.sstatic.net/2pxaW.pn ...

Attempting to trigger the onchange function established by jQuery

Within my code, I have a change listener set on the checkboxes in this section: $(".section").change(function() { if($(this).is(":checked")) { $("." + this.id).show(); ... Now, I am attempting to simulate a click event on the ch ...

Retrieving the selected value from a dropdown using jQuery's `$('#id').val()` may not always provide the desired result

I am having trouble retrieving the selected value from a dropdown menu as it keeps returning either an empty string or undefined results. My HTML code is structured like this: <div class="input-group" style="padding-bottom: 10px;"> <span id= ...

Unable to select date from Angular UI datepicker within accordion due to non-functional calendar button

Check out this plunker http://plnkr.co/edit/2Fs6vCciXRRc7GeUwyR2?p=preview I need some help figuring out why the calendar button isn't working. The calendar popup shows up when clicking on the textbox, but not when clicking the button. It seems that ...

Executing the AngularJS GET method inside the run block following the config phase

To properly display the first page (home), I need to make a request inside the RUN method in order to retrieve user data from an API. Here is the sequence of dispatches in my console: CONFIG RUN INIT GET USER DATA SIDEBAR HOME SUCCESS GET USER ...

What is the best way to have a component in React "wait" for state updates?

Currently, I am using React to develop a battleship game. One issue I encountered is when the component loads and I try to map the board array, React throws an error stating "cannot read property board of undefined". After some debugging with console loggi ...