Utilizing $location.search parameters with ng-href for navigation

Something really strange is happening in my code right now.

I'm utilizing ng-repeat to generate multiple elements based on an array of objects, like so:

<a ng-repeat="report in reports" ng-href="#/report?report={{report.id}}+file=0" ></a>

The HTML being rendered appears to be correct, as shown below:

<a ng-repeat="report in reports" ng-href="#/report?report=81+file=0" 
class="ng-scope" href="#/report?report=81+file=0">

However, when I click on the link, it redirects me to a URL like this:

[root-url]/index.php#/report?report=84%20file%3D0

What's puzzling is that I actually want to be redirected here instead:

[root-url]/index.php#/report?report=84+file=0

Why are the "+" and the second "=" sign getting translated this way, even though they're correct in the link's href attribute? Has anyone encountered this issue before or have any idea what I might be doing wrong?

javascriptangularjsangularjs-ng-href

Answer №1

The issue at hand is that the URL is being encoded, while maintaining its original value.

As it stands, there is only one parameter labeled as report with a value of 84 file=0. In this context, the plus sign functions as a space character.

I presume you intended to have two parameters: report and file. To separate parameters in a URL, the correct symbol to use is an ampersand (&) rather than a plus sign.

<a ng-repeat="report in reports" ng-href="#/report?report={{report.id}}&file=0" ></a>

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

Can VueJS 1 and 2 be integrated within the same package.json configuration?

At the moment, my JavaScript files are using VueJS 1. However, I am preparing to work on a new section of the system and want to switch to VueJS 2. ...

javascriptnpmvue.jsvuejs2packages.json

Creating a ROT13 cipher in JavaScript

In my JS function, I need to handle a variable called i. My goal is to encode this variable using ROT13 before proceeding with the function. The challenge lies in decoding the variable and integrating it into the script. I came across a JavaScript implem ...

javascriptrot13

``Error encountered when attempting to navigate AngularJS route with trailing forward slash

I have a link that is working perfectly fine, like this: when('/videos', { templateUrl: 'partials/partial1', controller: 'MyCtrl1' }). But when I add a named group to the route like this: when('/videos/:video_id&ap ...

angularjs

The file extension validation function is not functioning correctly on Windows, however it is successfully working as expected

async upload( @UploadedFile() file: Express.Multer.File, @Body() body: FileUploadDto, ) { const forbiddenExt = [ '.exe', '.bat', ]; const fileName = file.filename || f ...

javascriptnode.jswindowsexpressfile-upload

Ways to identify local storage when a user visits the page for the first time using jQuery

As a beginner in the world of local storage in Jquery, I am looking to implement a feature on my Bootstrap 4 accordion. The desired functionality is as follows: If a user is visiting the page for the first time, all accordions should be open by default ...

javascriptjquerybootstrap-4local-storage

The declaration file for the 'vimeo' module was not located

My current setup includes typescript v^3.4.2, in an express app (^4.14.1), using node v11.3.0. During the build process for typescript, I encountered this error: Could not find a declaration file for module 'vimeo'. '/Users/me/Code/MyServe ...

javascriptnode.jstypescript

Error sound produced when detecting KeyCode on the keyboard

I'm currently working on a JavaScript project that involves capturing keyboard input. However, I'm encountering an issue where every time the user presses a key, it triggers an error sound. Is there a way to disable this sound? ...

javascripthtmlkeyboardaudiokeycode

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Entering the ajax success handler

I have created this code snippet and I'm looking for a way to pass the exact 'this' value (since there are multiple items with this class) into the ajax success function. Any suggestions on how to achieve that? $(document).on('click&ap ...

javascriptjqueryajax

automatically close modal upon logout

After a period of inactivity, users are automatically logged out of my angularjs app. The issue arises when a modal dialog is open during this process - even though the user gets logged out due to route change, the modal stays open. One possible solution ...

angularjsmodal-dialoglogout

Aggregate the properties of objects in an array into a single object using Lodash

I've been struggling to figure this out on my own, so I decided to seek advice from those with more experience. I have an array of objects called items, and I need to sum up specific properties across different objects in the array. The user can selec ...

javascriptarraysunderscore.jslodash

What is the best way to incorporate dynamic HTML content into the designated section?

I have the concept of including a text box in each dynamically created div. HTML <!DOCTYPE html> <html> <head> <title>trial </title> <meta charset="utf-8"> <meta name="viewport" cont ...

javascripthtmljquerybutton

How to access a component attribute in a JavaScript library method in Angular 8

Within my Angular project, I am utilizing Semantic UI with the code snippet below: componentProperty: boolean = false; ngOnInit() { (<any>$('.ui.dropdown')).dropdown(); (<any>$('.ui.input')).popup({ ...

javascriptjqueryangulartypescript

Having trouble accessing the *.json file as it is showing a 404 File Not Found error

I've been working on integrating the openrainbow API into my AngularJS with ASP.NET MVC application. There are two options for configuring and connecting to the openrainbow API, either With AngularJS or Without AngularJS. Currently, I have successful ...

angularjsasp.net-mvcopenrainbowapi

When displaying multiple images using HTML5 Canvas in a for loop, only the final set of images is drawn

I'm facing an issue with drawing images using an image loader inside a for loop. The images are only being drawn on the last iteration. The console is not displaying "draw -> 0" or "draw -> 1", it only shows "draw -> 2" Any assistance would ...

javascriptjqueryhtmlcanvas

Attempting to provide varying values causes If/Else to become unresponsive

I've implemented a function that scans a file for a specific term and then outputs the entire line as a JSON object. Strangely, when I include an else statement in the logic, an error occurs: _http_outgoing.js:335 throw new Error('Can\& ...

javascriptjsonnode.jshttp

Tips for filtering an array when the filter is within an Angular directive

My attempt at creating a general directive for filtering arrays in Angular is facing some issues. <body ng-controller="MainCtrl"> controller: <input type="text" ng-model="query.name" /> - works<br> directive: <span filter by=" ...

angularjsangularjs-directive

Tips for configuring field names with templates in AngularJS

I am looking to incorporate label-field interaction with field validation properties. To demonstrate this, I have created a functional example on Plunker. Visit the Plunker Example In the provided example, the field name is currently hardcoded. I attemp ...

angularjsangularjs-directive

Encountering an unknown provider error in AngularJS while using angular-animate

Upon removing bower_components and performing a cache clean, I proceeded to reinstall dependencies using bower install. However, the application failed to load with the following error message: Uncaught Error: [$injector:unpr] Unknown provider: $$forceRefl ...

javascriptangularjs

Failure to receive Ajax XML data in success callback

I am struggling to access the book.xml file that is located in the same folder as other files. Everything seems fine, but the ajax function refuses to enter the success state and instead shows an [object object] error message. The XML file is very simple, ...

javascriptjqueryhtmlajax