AngularJS right-click menu

I need a context-menu directive that can provide information on the clicked element for proper reaction.

Although I experimented with this module, I'm facing an issue in uniquely identifying the clicked element. This is hindering my ability to apply the correct logic:

I am looking for a solution where I can pass specific data into the callback function

Controller:

$scope.items.Data = [{Code:'row1', Name:'Name1'},{Code:'row2', Name:'Name2'}]
$scope.items.Actions = [
    {
        Code: 'Action1',
        Name: 'First action'
    },
    {
        Code: 'Action2',
        Name: 'Second action'
    }   
]

var actionList = [];
for (var i = 0; i < $scope.items.Actions.length; i++) {

            actionList.push($scope.items.Actions[i].Name, function ($itemScope,$event) {
                console.log('Action executed', $scope.objectId, $itemScope,$event,$itemScope.$index);
                // Need access to $scope.items.Actions[i].Code or at least the index of the array
            });
}
$scope.contextOptions = actionList;

HTML:

<table>
    <thead>
        <tr>
            <td>Code</td>
            <td>Name</td>       
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in items.Data" context-menu="contextOptions">
            <td>{{row.Code}}</td>
            <td>{{row.Name}}</td>
        </tr>
    </tbody>
</table>

Answer №1

In my experience, I have successfully implemented indexing without any issues. Instead of utilizing

for (var i = 0; i < $scope.items.Actions.length; i++) {}

You can switch it up to

$scope.items.Actions.forEach(function(action, index){
     actionList.push(action.Name, function ($itemScope,$event) {
                console.log('Action executed', $scope.objectId, $itemScope,$event,index);
    });
})

Please confirm if this aligns with your requirements.

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

Having trouble with checking a Checkbox in an Angular UI Grid with selenium automation

I am currently working on automating a web application that utilizes an angular UI Grid to display data. I am trying to automate the process of selecting checkboxes in the Grid by row using Selenium, but so far I have been unsuccessful in achieving this ta ...

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

Unable to validate date using moment.js

I am currently facing an issue with date validation using moment in TypeScript. Even after providing a range of different date formats and inputting dates according to these formats, the validation always returns false. HTML ` <p-calendar [ngModel]=&q ...

Retrieving values from multiple Select components in Material-UI is key

I have encountered an issue with my two MUI Select components on the page. I am attempting to set values based on the id of the Select component. Initially, when I check (id === "breed-select") in the console, it returns true, but shortly after ...

Wrapping dynamic page titles with comment tags in NextJS for cleaner code

I am currently working on NextJS version 12. In my project, I have a file named Layout.js which contains the following code: import Head from "next/head"; const Layout = ({children, pageTitle, mainClass}) => { return ( <> ...

Is there a way to improve efficiency in JavaScript and JSON by reducing the size of the array?

My partner and I are currently collaborating on the development of a small web application. This app serves as an information hub, sourcing data from a JSON file that is expected to contain around 150 items, each with approximately 130 properties. As we c ...

A shortcut for calling functions in Lodash

Looking to execute a series of functions using Lodash? Here's an example: const functions = [ () => console.log('Fn 1'), () => console.log('Fn 2') ]; _(functions).each(fn => fn()); Wondering if there is a Lodash ...

What are the advantages of using history.push or another method from react-router-dom compared to simply assigning the path to window.location.pathname?

When I need to navigate within my code, I find it more convenient to simply assign the desired path to window.location.pathname. Can this approach have any drawbacks? ...

Discover the secrets of extracting the ID from a MenuItem within a Menu

Table Ui with menu Struggling with fetching the correct user ID in the edit button The edit button for all users is only displaying the last user's ID If the edit button is not nested inside the Menu, it works fine. However, within the Menu, it onl ...

Can you enhance your AutoSuggest feature using jQuery efficiently?

I am currently developing a jQuery AutoSuggest plugin that takes inspiration from Apple's spotlight feature. Below is the basic code structure: $(document).ready(function() { $('#q').bind('keyup', function() { if( $(this).v ...

Add a new sibling item to Angular-UI-tree

I am trying to add a sibling item to a tree when clicked in angular-ui-tree (https://github.com/angular-ui-tree/angular-ui-tree) Here is an example of what I currently have: <item><input value"item A #1"><button>insert under</button& ...

Is it possible to utilize both body-parser and Formidable simultaneously?

I've been working on a problem for a few days now, but I'm having trouble understanding certain aspects of it. My website is built using NodeJS and ExpressJS, with form handling done through body-parser. var adName = req.body.adName; var adMess ...

Using Google Chart API to create stacked bar charts with annotations using symbols

I am trying to annotate the bars in my stacked bar chart with currency symbols for profit and costs. While I have been able to successfully annotate the bars without currency symbols, I am facing difficulties in displaying them with the $ prefix. Can anyo ...

Seeking consent for HTML5 Geolocation API usage in web applications: A step-by-step guide

Seeking help with using html5 geolocation this.getCurrentLocation = function(callback) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (pos) { callback({ 'la ...

Tips for dynamically adding a style property to an element with ng-class in AngularJS

How can I dynamically change the color of a CSS class after using ng-class and add a property to an existing CSS class? <style> customcss:after{ border-top: 7px solid green; } </style> I want to be able to change the color dynamically using ...

What is the best way to define a variable in EJS?

I need to populate my database array results on the frontend using EJS. The code snippet I'm using is as follows: var tags = ["<%tags%>"] <% for(var i=0; i<tags.length; i++) { %> <a href='<%= tags[i] %&g ...

Why does serializeArray() function work in Firefox and Chrome, but not in IE(11)?

I am facing an issue with serializing a form that is working perfectly in Chrome and FireFox, but not functioning at all in IE11. The problem seems to be arising from serializeArray() returning an empty array. JSON.stringify($("#enrollmentForm").find( ...

Pull information from API and populate a dropdown menu in an Angular material select input

I am facing an issue with displaying data from an API in a mat select input field. I have tried to iterate over the data using a for loop but it is not working as expected. Can someone help me figure out how to properly populate the mat select input with d ...

Vue3 does not support parameter assignment

I am working on creating a function that takes two parameters, a string and an array. The array is meant to be filled with data obtained from Axios. However, I am encountering the issue {'assignment' is assigned a value but never used.}. My goal ...

Managing date fields retrieved from a REST Api in AngularJS

One of the challenges I'm facing involves a REST API that sends back JSON data with dates formatted in ISO-8601 style: yyyy-MM-ddTHH:mm:ss: { id: 4 version: 3 code: "ADSFASDF" definition: "asdflkj" type: "CONTAINER" value: "12 ...