Pass along the value of a link upon clicking on it

I have implemented a simple list using md-data-table:

<tr md-row md-select="device" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="device in devices.data">
<td md-cell style='text-align:left;vertical-align:middle'>{{device.ID}}</td>
</tr>

My objective is to write code that allows me to click on an entry in the list and be directed to another site/state/view where the controller can retrieve the value, like device.ID, and generate a view with data related to that device.ID.

While I considered using php post/get method, it's not feasible due to project requirements.

Answer №1

Ensure to include a ng-click attribute that triggers a function to store the device.ID in a $rootScope variable:

<td md-cell><a href="" ng-click="storeDeviceID(device.ID)">{{device.ID}}</a></td>

The storeDeviceID function in your controller may look similar to this:

$scope.storeDeviceID = function(deviceID){
  $state.go('i_liveDevice');
  $rootScope.liveDevice=deviceID 
};

Remember to inject the dependencies $rootScope and $state into your controller.

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

Prisma auto-generating types that were not declared in my code

When working with a many-to-many relationship between Post and Upload in Prisma, I encountered an issue where Prisma was assigning the type 'never' to upload.posts. This prevented me from querying the relationship I needed. It seems unclear why P ...

The syntax for an Angular controller

During my research on angular interview questions and answers, I came across a discussion about different syntax styles for controllers. The author presented their code in the following format: function Customer($scope) { $scope.CustomerName = "Sh ...

Explain to me the process of passing functions in TypeScript

class Testing { number = 0; t3: T3; constructor() { this.t3 = new T3(this.output); } output() { console.log(this.number); } } class T3 { constructor(private output: any) { } printOutput() { ...

Data update using AJAX and codeigniter was unsuccessful

How can I update my data using Codeigniter and AJAX for submitting the response? Below is the View section of my code: <form id="form_update" action="<?php echo base_url() ?>admin/update_derap_info" method="POST" role="form"> <textare ...

Express Validator: The Art of Isolating Validation Logic

This query is more focused on structuring code rather than troubleshooting bugs or errors. I am currently tackling request body validation, where the JSON structure looks like this: { "title": "Beetlejuice", "year&qu ...

Exploring the world of third-party widgets: Comparing Angular, jQuery, and traditional JavaScript

I have a plan to develop a simple embeddable widget similar to Google ads or Facebook like box. Users will be able to easily add the widget to their website and I will extract some parameters to fetch data from my servers. Previously, I relied on jQuery f ...

JavaScript code for initiating the npm start command

Is it possible to include the npm-start command in a JavaScript script? Requirement: Develop a JS script capable of triggering the npm-start command. Operating System: Microsoft Windows I need to turn it into a Windows service. However, in the code snip ...

Utilizing JSON data to create dynamic HTML content for Isotope.js filtering

UPDATE: After struggling to understand the previous answers, I have revised this question for clarity. As a beginner, I hope this simplified version can benefit others like me... I want to utilize isotope.js to showcase specific data from a JSON source (r ...

Objects remaining static

I'm currently working on a VueJS component that has the ability to export data into .xlsx format. To achieve this functionality, I am utilizing the json2xls library, which requires an array of objects with identical keys (representing column names) to ...

The data type 'unknown' cannot be assigned to the type 'any[]', 'Iterable<any>', or (Iterable<any> & any[])

I have been working on creating a custom search filter in my Angular project, and it was functioning properly. However, I encountered an error in my Visual Studio Code. In my previous project, everything was working fine until I updated my CLI, which resul ...

nodemon was not properly installed on the system

I attempted to add nodemon to my application using the command below: npm install nodemon -g This is the output that was generated: changed 116 packages, and audited 117 packages in 8s 16 packages are looking for funding run `npm fund` for details fou ...

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Why isn't the video div sliding down and displaying properly in the beginning? Any ideas on how to fix it? Here is the snippet of HTML code and JavaScript: <!DOCTYPE HTML> <html> <head> <title>Team Songs</title> <link ...

Error encountered when parsing JSON data in Vue.js due to presence of invalid characters in the

I have been working on a web application that allows me to upload a JSON file, make changes to it, and then download it. However, the resulting JSON is not valid because certain characters seem to change during the process. Even when I simply upload and do ...

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Upon receiving output in html string format from services, I am presented with the following: "<html>↵<h1>↵Example : ↵<br>Explanation↵</h1>↵<hr>↵<b>key1 : ABCD <br>key2 : 2016-10-18-18-38-29<br> ...

Any suggestions on how to secure my socket connection following user authentication in redux?

After onSubmit, userAction.login is called which then dispatches "SUCCESS_AUTHENTICATE" to set the token of the user and socket state in their respective reducers. How can I proceed to trigger socket.emit("authenticate", {token})? ...

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

Incorporate the key as a prop within a Child Component in a React application

I am trying to display a list of elements in React, where the key of each element is used as an index in front of the item. However, when I try to access props.key, it just returns undefined. Does anyone have any suggestions on how to access the key proper ...

Encountering a fragment error while utilizing create-react-library

Recently, I embarked on the journey of publishing a React component to npm that I had created. In my quest for knowledge, I stumbled upon create-react-library, which I decided to use for the first time. As I started testing my component from the test folde ...

Use a custom Angular directive to transform an HTML input field into a label

I have various input, textarea and select elements on certain pages (angular templates). My goal is to redefine the "input" directive so that it can take a parameter like ViewMode = true from either localStorage and convert all inputs into labels. If I cha ...

Is there a way to generate random numbers that will create a chart with a general upward trend?

Are you looking for a solution to generate random numbers for charts that trend upwards and to the right? I am currently utilizing a JavaScript charting engine, so I will require numbers in JSON format eventually. However, I am open to alternative methods ...