What is the best way to send the link's ID to an AngularJS controller?

Question

What is the best way to send the link's ID to an AngularJS controller?

I have a scenario similar to the following:

<a href="#" title="Post 1" id="car1"> Audi car 
</a>

<a href="#" title="Post 1" id="car2"> BMW car 
</a>

How can I pass the ID to the controller? I attempted the following:

<a href="#" title="Post 1" id="car1" onclick="getCarID(this.id)" > Audi car </a>

This method works outside of the Angular controller, but I would like it to be inside the controller. It seems that using ng-click is necessary, however, this.id will not function. How can this be resolved? In my controller and getCarID function, I have implemented it as follows:

angular.module('myModule')
.controller('carController', function($scope) {

    $scope.getCarID = function(elementID) {  
        var car = document.getElementById(elementID);
        console.log(elementID + " has been clicked");
    }
)}

If anything is unclear or requires further explanation, please leave a comment and I will update the question accordingly.

Thank you for your assistance.

javascript angularjs

Answer 1

Answer №1

Why not utilize the id of the target event?

<a href="#" title="Post 1" id="car1" ng-click="getCarID($event)">

Here is how you can handle it in your controller:

$scope.getCarID = function(event) {
   var id = event.target.id;
}

function Ctrl($scope) {

    $scope.action = function(event) {
        console.log('clicked id is: ' + event.target.id);
    };
}

<!doctype html>
<html ng-app>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   </head>
   <body>
      <div ng-controller="Ctrl">
         <a id="123" ng-click="action($event)">click</a>
      </div>
   </body>
</html>

Answer 2

Why not utilize the id of the target event?

<a href="#" title="Post 1" id="car1" ng-click="getCarID($event)">

Here is how you can handle it in your controller:

$scope.getCarID = function(event) {
   var id = event.target.id;
}

function Ctrl($scope) {

    $scope.action = function(event) {
        console.log('clicked id is: ' + event.target.id);
    };
}

<!doctype html>
<html ng-app>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   </head>
   <body>
      <div ng-controller="Ctrl">
         <a id="123" ng-click="action($event)">click</a>
      </div>
   </body>
</html>

Answer 3

Answer №2

Make sure to include the missing quotation mark in this code snippet:

<a href="#" title="Post 1" id="car1" onclick="getCarID(this.id)" > Audi car  </a>

Answer 4

Make sure to include the missing quotation mark in this code snippet:

<a href="#" title="Post 1" id="car1" onclick="getCarID(this.id)" > Audi car  </a>

What is the best way to send the link's ID to an AngularJS controller?

Answer №1

Answer №2

Similar questions

selection menu and advancement gauge

Set up a JavaScript function that triggers an alert if two numbers are determined to be equal

finding the initial element within an object using lodash in javascript

issue with displaying popover component using React with Material UI

IE8 experiencing issues with jQuery live click event functionality

Decrease initial loading time for Ionic 3

Make sure to always send back JSON data when using the default error handler in ExpressJS

Acquire information asynchronously in JavaScript while inside a for loop

Struggling with sending form data to the back end when uploading images in Angular

Unable to locate the value property of a null object

Search for specific item within an array of objects

Integrating a conditional statement into the existing for loop code to conceal the covers

An Ajax call nested within another Ajax call

Commitment to provide the outcome of the second promise in case the first one encounters

Integrating an external JavaScript library into the codebase

Deploy Node.js on a Debian server hosted on Google Compute Engine

Group the JSON data in JavaScript by applying a filter

The axios GET request failed to return a defined value

Injecting script into a webpage and initiating an ajax request prior to receiving a response

Unable to access the current state within an asynchronous function in React.js