Tips for passing a parameter (such as an ID) through a URL using ng-click to display a subdocument belonging to a particular user in

I am looking to retrieve specific user subdocument data on a separate page by passing the id parameter in a URL using ng-click in AngularJS.

<tr ng-repeat="register in registerlist | filter:searchText">
  <td>{{$index+1}}</td>
  <td>{{register.name}}</td>
  <td>{{register.email}}</td>
  <td>{{register.mobile_no}}</td>
  <td>{{register.area_name}}</td>
  <td>
    <button type="button" class="btn btn-default"
            ng-click="RegisterView(register._id); showOrder = !showOrder">View</button>
  </td>
</tr>

Example URL:

localhost:8080//register/5426ced88b49d2e402402205

In this case, the user mentioned above has a subdocument, which is why I need to access and view it on a separate page.

Controller:

$scope.RegisterView = function(id) {
  $scope.IsVisible = $scope.IsVisible ? false : true;
  $http.get('/auth/register-list/' + id).success(function(response){
    $scope.bookinglist = response.booking;
  });
};

Answer №1

Utilize the $location variable within your $scope.RegisterView method to direct to a different page. For example, implement this code:

$location.path('/register/5426ced88b49d2e402402205')

Answer №2

In order to display your subdocument on a separate page, you can achieve this by:

<a target="_blank" >
  // specify the target for the div that contains the subdocument
</a>

If your register has an ID, you can directly call it using RegisterView(register.id)

$scope.RegisterView = function(id){
    $scope.IsVisible = $scope.IsVisible ? false : true;
    $http.get('/auth/register-list/' + id).success(function(response){
        $scope.bookinglist = response.booking;
    });
};

TEMPLATE

<button type="button" ng-click="RegisterView(register.id)"></button>

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

Embed an angular directive into HTML dynamically

I have a multitude of directives within my angular module, ranging from MyDirective1 to MyDirectiveN. Furthermore, I keep track of these directive names in MyDirectiveList: ['MyDirective1', 'MyDirective2', ..., 'MyDirectiveN' ...

I am having trouble calling a method in the subscribe function because it is showing an error message saying "Cannot read property 'showMessageFromSocket' of undefined"

My goal is to call a method within the subscribe block, but I am encountering an error that says "Cannot read property 'showMessageFromSocket' of undefined". How can I successfully call the showMessageFromSocket method? In Angular, this was possi ...

What is the best way to incorporate a changing variable within an htmx request?

One of the endpoints in my site requires an ID to be passed as a parameter. For example: mysite.com/product/{id}?limit=5 I'm wondering how to pass the 'id' variable in the hx-get attribute. I can utilize AlpineJS or vanilla JS for this tas ...

Tips for focusing on the second popup when opening it from the first popup using the angular-ui-bootstrap modal directive

I have a situation where I need to display multiple popups with accessibility in mind. The first popup is functioning correctly, but when I try to open a second popup from the first one, the focus remains on the initial popup and does not shift to the new ...

Implementing line breaks in JSON responses in an MVC application

I am looking to show a JavaScript alert with line breaks using the message returned from a controller action that returns JSON result. I have included "\n" in the message for line breaks. Below is the code snippet from my controller: [HttpPost] publ ...

What are some ways I can incorporate SVG icons using the <svg> and <use> elements in my website?

I am currently working on an Angular 1.5 application that communicates with Salesforce using REST API. Salesforce requires the use of SVG icons with a specific syntax: <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user"& ...

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

Hey there, I recently worked with Angular8 and Bootstrap 4. I utilized a Bootstrap multi-select dropdown, where I encountered an issue: specifically, I'm trying to disable and gray out the options for PL Marketing and CL Marketing but have been unsucc ...

Trigger an alert using the Ajax response

Is there a way to display the value of imageX outside of the $.ajax() function? var imageX; $.ajax({ type: 'GET', url: 'php/my1.php', dataType: 'json', async: 'false', success: function(response) ...

Exposing a Hidden Division with a Link via jQuery

I currently have a jQuery Panel set up to open when clicking a button. Now, I am looking to add a second link at the bottom of the page that will also open the same panel. Can anyone provide guidance on how to accomplish this? You can view my JSFiddle a ...

Incrementally add a new object to an existing array of objects

I have an array of objects below. When I do a console.log, this is what I see: [Object, Object, Object] 0:Object name: "Rick" Contact: "Yes" 1:Object name:"Anjie" Contact:"No" 2:Object name:"dillan" Contact:"Maybe" Now, I wa ...

Nuxt: Delaying Loading of Google Maps in VueJS Until Data is Fully Prepared

Hello, I am currently working on my very first VueJS project and I have successfully implemented the vue2-google-maps. However, I have encountered a problem while trying to connect the map markers to my site's JSON feed through the Wordpress REST API. ...

The .map() function seems to be missing some data when fetching from the database in a Node.js

I am currently tackling an exercise for a Bootcamp, and the function I am using is not yielding the desired outcome. The objective is to query the database with a first name or a part of a first name. While I can successfully execute the DB query and retri ...

An Array of objects is considered NULL if it does not contain any values before being iterated through

Working with Files in TypeScript (Angular 8) has led me to Encode the files in Base64 using the code below: private async convertToBase64(evidences: Array<EvidenceToDisplay>): Promise<Array<EvidenceToDownload>> { const results: Arr ...

Trouble initiating a jquery function in componentDidMount in a React component

I have encountered an issue with my ReactJS application. The $(document).ready(function(){}); function stops working after I switch paths using React Router Dom. In order to find a solution, I turned to Google and came across this helpful article: React- ...

Update Button Visibility Based on State Change in ReactJS

Currently, I'm utilizing a Material UI button within my React application. Despite changing the state, the button remains visible on the screen. Here's the relevant code snippet: function MainPage() { const state = useSelector(state => sta ...

javascript trigger not functioning

Currently, I am working with ASP development and incorporating jQuery into my projects. One challenge I've encountered is not being able to utilize the trigger function upon page load. Interestingly, my change function seems to work smoothly, except ...

best method for embedding javascript code within html (within a script tag)

In my quest to create dynamic HTML using jQuery and insert it into a specific div on my website, I encountered an issue. Specifically, I am attempting to generate an anchor element where both the href and label are determined by JavaScript variables. Here ...

Leveraging an array retrieved through JQuery AJAX for auto-complete data in materializecss

I am delving into materializecss for the first time, aiming to enhance its auto complete feature by incorporating an array of options obtained from a database. Unfortunately, my attempts have not been successful. After scouring through Stack Overflow and o ...

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

Generate a new web component using JavaScript

My HTML table looks like this: <table id = "rpttable" name = "rpttable"> <thead> Column Headers here... </thead> <tbody id = "rptbody" name = "rptbody"> data here <3 .... </tbody> </table> And in my ...