Using the ng-repeat directive in an angular-nvd3 tooltip

Looking to dynamically repeat values in the tooltip content of an nvd3 graph? Not sure how to achieve this using ng-repeat with JSON data? Seeking guidance on alternative methods? I can help!

 $scope.options = {
            chart: {
                type: 'multiBarHorizontalChart',
                height: 380,
                width: 350,
                x: function(d) {
                    return d.label;
                },
                y: function(d) {
                    return d.value;
                },
                showControls: false,
                showValues: true,
                showLegend: false,
                duration: 1000,
                xAxis: {
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Values',
                    axisLabelDistance: 100,
                    tickFormat: function(d) {
                        return d3.format('.0f')(d);
                    }
                },
                "tooltip": {
                    "enabled": true,
                    "headerEnabled": true,
                    "valueFormatter": function(d, i) {
                        "use strict"
                        return;
                    },
                    "keyFormatter": function(d, i) {
                        var i = curr.split('$')
                        return i[1];
                    },
                    contentGenerator: function(key, x, y, e, graph) {
                        if (key.data.tooltip.length != 0) {
                            return html(key)

                        } else
                            return "No Data to Show";
                    }
                }
            },
            title: {
                enable: false,
            },
        };

Seeking to utilize ng-repeat within HTML for dynamic content?

function IpHtml(key) {
            var head = $scope.iptraffic.category;

            var html = '<div class="toolTipTraffic">' +
                '<div class="head">' +
                ' <b>' + head + '</b>' +
                '</div>' +
                '    <hr>' +
                '    <table class="table toottipTableTraffic">' +
                '        <tr ng-repeat=vals in key>' + // ng-repeat here
                '            <td>IP</td>' +
                '            <td>' + ': {{vals}}' + '</td>' +
                '        </tr>' +
                '    </table>' +
                '</div>';
            return html
        }

Answer №1

Make sure to compile your HTML code before sending it off to the graph

angular.module('sampleApp', [])
  .controller('sampleController', ['$scope', '$compile', function ($scope, $compile) {

    function GenerateHtml(key) {
        var tooltipScope = $scope.$new(false); // inherit from parent, enabling use of 'graph.category' for header
        tooltipScope.key = key;

        var html = '<div class="toolTipGraph">' +
            '<div class="head">' +
            ' <b ng-bind="graph.category"></b>' +
            '</div>' +
            '    <hr>' +
            '    <table class="table tooltipTableGraph">' +
            '        <tr ng-repeat=vals in key>' + // repeating elements here
            '            <td>DATA</td>' +
            '            <td>' + ': {{vals}}' + '</td>' +
            '        </tr>' +
            '    </table>' +
            '</div>';

        var element = $compile(html)(tooltipScope);

        return element[0].outerHTML
    }
   }]);

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 form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

The simple-ssh Node has successfully completed its operations without encountering any errors

I'm having trouble establishing a connection to an Ubuntu EC2 instance using the Node library called simple-ssh. Below is the code snippet I'm using: const SSH = require('simple-ssh') const fs = require('fs') var ssh = new ...

Challenge with Updating React Components When Switching Themes

In my React application, I'm facing a challenge with theme switching. There are two themes available: Theme One and Theme Two. To dynamically load theme components, lazy loading has been implemented based on the selected theme. Each theme has its own ...

What causes variations in running identical code between the Node environment and the Chrome console?

let myName = "World"; function functionA() { let myName = "FunctionA"; return function() { console.log(this.myName); } } functionA()(); Executing the code above in my terminal with node results in undefined, while running it in Chrom ...

Extracting information from an ENORMOUS Array

Let's start with my code snippet, featuring an array: var UserProfiles = [{ userProfileID: 1, firstName: 'Austin', lastName: 'Hunter', email: 'test', token: '', platform: 'android ...

What could be causing this JavaScript code not to run?

Help needed! I'm a student struggling to diagnose the issue in my code. Whenever I click the buttons, nothing happens at all. I've tried debugging by isolating each function, but still can't seem to figure it out. I've searched through ...

AngularJS version 1 not enabling 2-way binding within setTimeout function

I am trying to implement a feature where the submit button is disabled during the saving process and then enabled once the save is complete. However, I am facing an issue where even though the flag changes, the view does not update as expected with two-wa ...

Format the image to fit within a div container

I'm currently utilizing Bootstrap and am looking to insert some images into my div while ensuring they are all the same size (standardized). If the images are too large (as they typically are), I want to resize them to fit within my div and crop them ...

Employing identification as a variable

I'm currently attempting to retrieve the text within a span element that has a class of "link," but I seem to be encountering some issues. <div id="item-0" class="box"> ....... </div> <div id="item-1" class="box"> <p>& ...

I am consistently running into an Uncaught Syntax error within my Express server.js while using Angular 1.5.6

I've been struggling for hours to integrate Angular with routes that I've created. Eventually, I decided to give Express a try and set up a basic server.js file to run as a standalone server. However, nothing seems to be working and I keep encou ...

The requested 'Pagination' component (imported as 'Pagination') could not be located within the 'swiper' library. Possible exports include Swiper and default

I was trying to implement pagination using swiper. I included the Pagination module with this import statement: import { Pagination } from "swiper"; Here's my configuration: https://i.sstatic.net/1iqoi.png The error that I encounter ...

What is the best method for retrieving the alias in the new Angular router?

In the angular-new-router, users have the ability to define an alias for a component: MyController.$routeConfig = [ { path: '/', component: 'user', as: 'myUser' } ]; We can then activate it using: <a ng-link="myUser"&g ...

Heroku deployment failed: Push rejected due to lack of a Cedar-supported application

Trying to deploy my 3D game (created with three.js) on a Heroku server has brought up an issue. After running the command "git push heroku master," I encountered the following problem: Initializing repository, done. Counting objects: 252, done. Delta com ...

Enhancing User Experience with Cascading Dropdown Menus in MVC 5

I've been working on this project for a few days now, trying to get Cascading Dropdownlists to function properly. I'm having an issue where my State dropdownlist is not populating and no error message is displayed when the Ajax call fails. What c ...

a dedicated TypeScript interface for a particular JSON schema

I am pondering, how can I generate a TypeScript interface for JSON data like this: "Cities": { "NY": ["New York", [8000, 134]], "LA": ["Los Angeles", [4000, 97]], } I'm uncertain about how to handle these nested arrays and u ...

What methods can be used to determine if a session is still active? Are there specific techniques that are effective for verifying session status?

After my initial experience with Web Design, I realized that the way I handled sessions wasn't efficient due to time constraints. I need advice on how to properly handle sessions in web development. In my previous project, I used PHP embedded within H ...

Creating dynamic web content using KaTeX and Node.js

When I attempt to display a complex formula using HTML and CSS, I encounter difficulties. Instead of the desired output, my screen is filled with confusing unicode characters. To resolve this issue, I decided to use KaTeX. I downloaded KaTeX into the dire ...

What exactly are AngularJS module dependencies and how do they work together?

After exploring the tutorial example provided on AngularJs's site ( here) (The main HTML appears to be quite minimal with only ng-view and ng-app=phonecatApp included) Within the app.js file, we find: var phonecatApp = angular.module('phoneca ...

Watching the Event Emitters emitted in Child Components?

How should we approach utilizing or observing parent @Output() event emitters in child components? For instance, in this demo, the child component utilizes the @Output onGreetingChange as shown below: <app-greeting [greeting]="onGreetingChange | a ...

SQLite Simplified - A Primer on Fundamentals

I'm currently experimenting with the SQLike query engine from Thomas Frank's website and finding it difficult to grasp the basic concept. In my project, I have JSON data sourced from my PHP code, which is structured like this: var placesJSON=&l ...