Unable to retrieve the numerical value within the chart

I am a beginner in learning angularjs. I have implemented a contextmenu for displaying table data.

<div contextmenu-container="meta.contextmenu">
          <table class="table table-striped table-bordered report-table" fixed-header>
            <thead class="text-center text-info">
            <th class="text-center">Annotation</th>
            <th class="text-center">Field</th>
            <th class="text-center">Message</th>
            <th class="text-center">Score</th>
            </thead>
            <tr ng-repeat="report in reports.data">
              <td class="text-center">{{ report.attributes.annotation }}</td>
              <td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
              <td>
                <input type="checkbox" ng-if="report.attributes.message && showcheckbox" 
                ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
                <span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
                  {{ report.attributes.message }}
                </span>
                <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
              </td>
              <td class="text-center">{{ report.attributes.score }}</td>
              <div contextmenu="meta.contextmenu" class="dropdown contextmenu ">
              <ul class="dropdown-menu dropdown-content" role="menu">
                  <li>
                      <a role="menu" href
                      data-ng-click="deleteAnnotation(report.attributes.field)">
                      <span>delete</span>
                      </a>
                  </li>
              </ul>
            </div>
            </tr>
          </table>
          </div>

However, when attempting to use the 

report.attributes.field within the deleteAnnotation
method, it returns as undefined. How can I resolve this issue?

javascriptangularjsarrays

Answer №1

To access each repeated object within '$itemScope', refer to '$itemScope.report'. From there, you can perform any desired operations on the data.

When using angular contextmenu, "meta.contextmenu.item" will indicate "contextmenu-item". This information should be helpful.

Explore ui bootstrap contextmenu

HTML

<div ng-app="HelloWorldApp" class='container'>
    <div ng-controller="HelloWorldController">
      <table class='table table-striped'>
          <tr>
            <td><b>NAME</b></td>
            <td><b>ADDRESS</b></td>
          </tr>
        <tr ng-repeat="obj in objects" >
          <td>{{obj.name}}</td>
          <td context-menu="menuOptions">{{obj.address}}</td>
        </tr>
      </table>
      <div ng-bind="selected"></div>
    </div>
</div>

JS

angular.module('HelloWorldApp', ['ui.bootstrap.contextMenu'])
   .controller('HelloWorldController', function($scope) {
       $scope.greeting = "Hello World";
  $scope.objects = [{
    name: 'person1',
    address: 'India'
  },
  {
    name: 'any name',
    address: 'any address'
  }];
  $scope.menuOptions = [
    ['Select', function ($itemScope, $event, modelValue, text, $li) {
        $scope.selected = $itemScope.obj.address;
    }]
];
});

Check out angular-contextmenu

HTML

<div ng-app="HelloWorldApp" class='container'>
    <div ng-controller="HelloWorldController">
      <div contextmenu="meta.contextmenu" class="dropdown contextmenu">
  <ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">
      {{ meta.contextmenu.item.address }}
    </li>

    <li>
      <a role="menuitem" href
        ng-click="delete(meta.contextmenu.item)"
      >
        <span>Delete</span>
      </a>
    </li>
  </ul>
</div>

      <table class='table table-striped' contextmenu-container="meta.contextmenu">
          <tr>
            <td><b>NAME</b></td>
            <td><b>ADDRESS</b></td>
          </tr>
        <tr ng-repeat="obj in objects" contextmenu-item="obj" >
          <td>{{obj.name}}</td>
          <td context-menu="menuOptions">{{obj.address}}</td>
        </tr>
      </table>
      Data  to delete : 
      <pre>{{selected.name}}</pre>
      <pre>{{selected.address}}</pre>
    </div>
</div>

JS

angular.module('HelloWorldApp', ['io.dennis.contextmenu'])
   .controller('HelloWorldController', function($scope) {
       $scope.greeting = "Hello World";
  $scope.objects = [{
    name: 'person1',
    address: 'India'
  },
  {
    name: 'any name',
    address: 'any address'
  }];
  $scope.delete = function(data){
    console.log(data);
    $scope.selected = data;
  }
});

**Please ensure necessary libraries are included for ui-bootstrap contextmenu and/or angular contextmenu ** Apologies again for the poor formatting.

Answer №2

After closing the <tr> tag with the ng-repeat, make sure to call the deleteAnnotation function within that scope.

The variable report belongs to the ng-repeat scope, so ensure you are calling the deleteAnnotation function inside the ng-repeat.

<tr ng-repeat="report in reports.data">
    <td class="text-center">{{ report.attributes.annotation }}</td>
    <td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
    <td>
        <input type="checkbox" ng-if="report.attributes.message && showcheckbox" 
        ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
        <span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
            {{ report.attributes.message }}
        </span>
        <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
    </td>
    <td class="text-center">{{ report.attributes.score }}</td>
</tr>

In this case, the scope ends after the loop. Therefore, you will not be able to access the report variable outside of it.

Avoid nesting a div within a table element.


    <table class="table table-striped table-bordered report-table" fixed-header>
        <thead class="text-center text-info">
        <th class="text-center">Annotation</th>
        <th class="text-center">Field</th>
        <th class="text-center">Message</th>
        <th class="text-center">Score</th>
        </thead>
        <tr ng-repeat="report in reports.data">
            <td class="text-center">{{ report.attributes.annotation }}</td>
            <td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
            <td>
                <input type="checkbox" ng-if="report.attributes.message && showcheckbox" 
                ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
                <span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
                    {{ report.attributes.message }}
                </span>
                <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
            </td>
            <td class="text-center">{{ report.attributes.score }}</td>
            <td>
                <div contextmenu="meta.contextmenu" class="dropdown contextmenu ">
                    <ul class="dropdown-menu dropdown-content" role="menu">
                        <li>
                            <a role="menu" href="#"
                            data-ng-click="deleteAnnotation(report.attributes.field)">
                            <span>delete</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>

Test this solution and ensure that the report object contains an attributes.field property during each iteration of the loop.

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

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

javascriptjquerycssjquery-ui

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

javascriptjqueryhtml

Guide to modifying the email confirmation URL in allauth

Currently, I am utilizing allauth within my Django application. After a user is created, an email is sent with a link structured like this http://localhost:8001/account/confirm-email/asdfafsd/ Nevertheless, I would prefer the link to be formatted as http: ...

djangoangularjs

Ways to Increase jQuery Element ID

I have several instances of jPlayer (a jQuery audio player) set up: jPlayer1, jPlayer2, jPlayer3, jPlayer4. Each one is initialized and preloaded with audio files. The following function will loop through an existing array and attach a method to play the ...

javascriptjqueryincrement

Performing subtraction on two time values with AM/PM formatting using JavaScript

I'm currently using a date.js plugin to convert my times into date objects and then trying to subtract them. However, the result is not showing as valid. The time format I am working with is 11:00 pm. Here is the code snippet: var tim_i = $('#in ...

javascriptjquerydatejs

Moving the logical aspects to services (factory) with AngularJS: Enhancing the efficiency of your controllers

As a newcomer to Angular, I am facing some initial challenges. I have created a small app with phonegap, onsen ui, and angularjs that utilizes the nfc-plugin. My goal is simple - to read a tag-id from an nfc-tag. Everything works perfectly when I include a ...

javascriptangularjscordovaonsen-ui

Utilizing jQuery to style and remove styles from a clicked radio button by leveraging parent() and next() methods

In my project, I have 3 identical sections that are exactly the same as each other. What I want to achieve is a functionality where when I click on the ".rad1" (first radio button), its label gets styled. Similarly, when I click on ".rad2", it should remov ...

javascriptjqueryhtmlcss

Is the dragging behavior of a rotated image different than that of the original image when using CSS rotation?

While working on a CSS grid to showcase images rotated at 60 degrees for a diagonal view, I encountered an issue. I wanted users to have the ability to drag and drop images within the grid, but when they drag an image, it moves as if it weren't rotate ...

javascriptjqueryreactjscss

Using VueJs to create custom Like and Unlike buttons with Vfor loop

How can I make the buttons increase separately? I've tried similar solutions, but they currently increase the number of likes and dislikes together at the same time. Additionally, I am receiving this message in the console: vue@next:1250 [Vue warn]: ...

javascriptvue.jsbutton

The visibility of JavaScript script to Tomcat is obscured

Working on a web project using servlets and JSP in IntelliJ. One of the JSP files manages graphics and user forms with graphics.js handling graphics and form validation done by validator.js. The issue I'm facing is that while Tomcat can locate graphi ...

javascriptwebtomcatintellij-idea

Exploring ways to retrieve the main project URL in ReactJS

I am currently using ReactJS and I am looking to retrieve the full path, hostname, and base URL of my project from within a component file. How can I accomplish this task? I have attempted the following code, but it is not working and is throwing the error ...

javascriptnode.jsreactjsnext.js

Dynamics of Rails and the power of jQuery with ajaxStop

For my Rails 5.2 project, I have included the gems 'jquery-rails' and 'jquery-ui-rails'. I am attempting to utilize the .ajaxStop( handler ) handler as outlined in the documentation found here: https://api.jquery.com/ajaxStop/#ajaxStop ...

javascriptjqueryruby-on-railsajax

Developing a specialized command-line application for currency conversion is my current project

Currently, I am working on developing a command-line application for currency exchange. I have created an interface to define the structure of an object array that will store the keys and values of currency names along with their current values in the inte ...

javascripttypescript

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

javascriptjqueryhtmlcss

Tips for managing numerous HTTP requests in Angular 6

I have a method that is trying to chain together 3 requests like this: showProfileDetails() { this.getUserInfo(this.currentUser.id).pipe( mergeMap(e => this.getAccounts(this.currentUser.id) ), mergeMap(e => this.getPayments ...

javascriptangulartypescriptrxjsobservable

Prevent angular from being executed through a JavaScript function triggered by a button click

Here is a button: <button ng-click="deleteCompany(company.id)" class="btn btn-danger" onClick="return window.confirm('This will permanently delete the entity\n Are you sure you want to delete this post?'); "> <s ...

javascriptangularjs

Verify a unique cross-field rule for comparing two time strings, customized by Vee

I am currently facing an issue with validating two time strings in my buefy form using vue. The goal is to ensure that the second time input does not exceed a one-hour difference from the first time input. Both time fields have granularity down to millisec ...

javascriptvue.jsvee-validate

Array of pointers in C++ containing structures

#include<iostream.h> #include<conio.h> #include<string.h> #include<stdio.h> struct telephone { char name[10]; char tno[9]; }; void main() { telephone a[5]; clrscr(); telephone* p; p = a; strcpy(a[0].na ...

c++arrayspointersstruct

Is it possible to retrieve HTML content using YQL?

Imagine the scenario where you need to retrieve information from a web page structured like this: <table> <tr> <td><a href="Link 1">Column 1 Text</a></td> <td>Column 2 Text</td> <td>Colum ...

javascriptjsonyahooyql

Accessing data from a CD-ROM or DVD through a web browser

I am currently working on developing a web application for a friend that will enable users to simply click a button to upload all the content from the CD-ROM or DVD they have inserted directly to a server. It's not feasible to rely on the standard br ...

javascripthtmlappletcdcd-rom