Why are my angularJS lists not displaying any items?

Generating a dynamic list menu in my HTML app through the controller seems to be causing an issue. Despite no errors showing up in the console, the items are not being generated as expected.

Custom HTML

<div id="toolbaropener">
        </div>
                <div id="accordion">
                  <ul>
                    <li>
                      <a href="#controlflow">Add new chart</a>
                      <div id="controlflow" class="accordion">
                      <div id="menu-container">
                        </div>
                        <div plumb-menu-item ng-repeat="x in library | filter : searchCommonValue" class="menu-item" data-identifier="{{x.library_id}}" data-title="{{x.title}}" draggable>
                            <img class="toolheader" src="{{x.icon}}">
                            <div class="toolcontent">{{x.title}}</div>
                        </div>
                      </div>
                </li>
          </ul>
    </div>

The controller is defined when it gets routed, i.e View.Html

  controller: 'mainController'

Custom app.js

var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider          
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'view.html',
            controller: 'mainController'
        })


});

routerApp.controller('mainController',['$scope','$http',function(scope,http){

    function module(library_id, schema_id, title, description, x, y, icon,variables) {
        this.library_id = library_id;
        this.schema_id = schema_id;
        this.title = title;
        this.description = description;
        this.x = x;
        this.y = y;
        this.icon = icon;

    }

    scope.library = [];
    scope.library_uuid = 0; 
    scope.schema = [];
    scope.schema_uuid = 0; 
    scope.library_topleft = {
            x: 15,
            y: 145,
            item_height: 50,
            margin: 5
    };

    scope.module_css = {
            width: 150,
            height: 100 // actually variable
    };



    scope.redraw = function() {
        console.log("-- Redraw function executed");
        scope.schema_uuid = 0;
        jsPlumb.detachEveryConnection();
        scope.schema = [];
        scope.library = [];
        scope.addModuleToLibrary("DoWhile", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Add-fav-icon.png",
        {
        "Control": {
        "Name": "DoWhile",
        "Icon": "Blah",
        "Variables": [
          {
        "Key": "GUUserID",
        "Value": 4544314512
          },
         {
        "Key": "Username",
        "Value": "test"
         }
     ]
  }
});
        scope.addModuleToLibrary("ForEach<T>", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Chat-icon.png",
    {
  "Control": {
    "Name": "ForEach",
    "Icon": "Blah",
    "Variables": [
             {
        "Key": "Password",
        "Value": "fdfgdfgdfg"
             },
             {
        "Key": "Surname",
        "Value": "blah blah"
             }
             ]
         }
        });
        };

    // add a module to the library
    scope.addModuleToLibrary = function(title, description, posX, posY,icon,variables) {
        console.log("Add module " + title + " to library, at position " + posX + "," + posY+", variables: "+variables);
        var library_id = scope.library_uuid++;
        var schema_id = -1;
        var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
        scope.library.push(m);
    };

    // add a module to the schema
    scope.addModuleToSchema = function(library_id, posX, posY) {
        console.log("Add module " + title + " to schema, at position " + posX + "," + posY);
        var schema_id = scope.schema_uuid++;
        var title = "";
        var description = "Likewise unknown";
        var icon = "";
        var variables = "";
        for (var i = 0; i < scope.library.length; i++) {
            if (scope.library[i].library_id == library_id) {
                title = scope.library[i].title;
                description = scope.library[i].description;
                icon = scope.library[i].icon;
                variables = scope.library[i].variables; console.log("Selected control variables : " + variables);
            }
        }
        var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
        scope.schema.push(m);
    };

    scope.removeState = function(schema_id) {
        console.log("Remove state " + schema_id + " in array of length " + scope.schema.length);
        for (var i = 0; i < scope.schema.length; i++) {
            // compare in non-strict manner
            if (scope.schema[i].schema_id == schema_id) {
                console.log("Remove state at position " + i);
                scope.schema.splice(i, 1);
            }
        }
    };


}]);
javascriptcssangularjshtml

Answer №1

Have you tried calling scope.redraw() inside your controller to initialize the data?

Here is a working example using your code, but with ngRoute instead of AngularUI Router.

index.html

<!doctype html>
<html ng-app="DiginRt">
<head>
    <title>Test Angular</title>
</head>
<body>

    <div ng-view></div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

view.html

<div id="toolbaropener">
</div>
    <div id="accordion">
                  <ul>
                    <li>
                      <a href="#controlflow">Add new chart</a>
                      <div id="controlflow" class="accordion">
                      <div id="menu-container">
                        </div>
                        <div plumb-menu-item ng-repeat="x in library | filter : searchCommonValue" class="menu-item" data-identifier="{{x.library_id}}" data-title="{{x.title}}" draggable>
                            <img class="toolheader" src="{{x.icon}}">
                            <div class="toolcontent">{{x.title}}</div>
                        </div>
                      </div>
                </li>
          </ul>
    </div>

app.js

var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ngRoute']);

routerApp.config(function($routeProvider) {

    $routeProvider          
        .when('/dashboard', {
            templateUrl: 'view.html',
            controller: 'mainController'
        })
        .otherwise('/dashboard');


});

routerApp.controller('mainController',['$scope','$http',function(scope,http){

    function module(library_id, schema_id, title, description, x, y, icon,variables) {
        this.library_id = library_id;
        this.schema_id = schema_id;
        this.title = title;
        this.description = description;
        this.x = x;
        this.y = y;
        this.icon = icon;

    }

    scope.library = [];
    scope.library_uuid = 0; 
    scope.schema = [];
    scope.schema_uuid = 0; 
    scope.library_topleft = {
            x: 15,
            y: 145,
            item_height: 50,
            margin: 5
    };

    scope.module_css = {
            width: 150,
            height: 100 
    };



    scope.redraw = function() {
        console.log("-- Redraw function executed");
        scope.schema_uuid = 0;
        scope.schema = [];
        scope.library = [];
        // Add module examples
        scope.addModuleToLibrary("DoWhile", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Add-fav-icon.png",
        {
        "Control": {
        "Name": "DoWhile",
        "Icon": "Blah",
        "Variables": [
          {
        "Key": "GUUserID",
        "Value": 4544314512
          },
         {
        "Key": "Username",
        "Value": "test"
         }
     ]
  }
});
        scope.addModuleToLibrary("ForEach<T>", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Chat-icon.png",
    {
  "Control": {
    "Name": "ForEach",
    "Icon": "Blah",
    "Variables": [
             {
        "Key": "Password",
        "Value": "fdfgdfgdfg"
             },
             {
        "Key": "Surname",
        "Value": "blah blah"
             }
             ]
         }
        });
        };



    scope.addModuleToLibrary = function(title, description, posX, posY,icon,variables) {
        console.log("Add module " + title + " to library, at position " + posX + "," + posY+", variables: "+variables);
        var library_id = scope.library_uuid++;
        var schema_id = -1;
        var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
        scope.library.push(m);
    };

    scope.addModuleToSchema = function(library_id, posX, posY) {
        console.log("Add module " + title + " to schema, at position " + posX + "," + posY);
        var schema_id = scope.schema_uuid++;
        var title = "";
        var description = "Likewise unknown";
        var icon = "";
        var variables = "";
        for (var i = 0; i < scope.library.length; i++) {
            if (scope.library[i].library_id == library_id) {
                title = scope.library[i].title;
                description = scope.library[i].description;
                icon = scope.library[i].icon;
                variables = scope.library[i].variables; console.log("Selected control variables : " + variables);
            }
        }
        var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
        scope.schema.push(m);
    };

    scope.removeState = function(schema_id) {
        console.log("Remove state " + schema_id + " in array of length " + scope.schema.length);
        for (var i = 0; i < scope.schema.length; i++) {
            if (scope.schema[i].schema_id == schema_id) {
                console.log("Remove state at position " + i);
                scope.schema.splice(i, 1);
            }
        }
    };

    scope.redraw();

}]);

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

Design a dynamic div element for banners that adjusts to different screen

Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted? For example, if you look at the slider on this website "", yo ...

jqueryhtmlcsstwitter-bootstrapresponsive

Encountering difficulties in generating a fresh React application using create-react-app

While setting up a new React application using the npx create-react-app my-app command, I encountered the following issue: ➤ YN0000: ┌ Resolution step node:internal/process/promises:246 triggerUncaughtException(err, true /* fromPromise */ ...

javascriptnode.jsreactjscreate-react-app

Storing the chosen item in a PHP drop-down menu

Is there a way to keep the selected value of a drop down when submitting a form with an onchange event? This is my current code: echo "<form method=\"post\"> <select name=\"Color\" OnChange=\"this.form.submit();\"&g ...

javascriptphpjqueryhtmlcss

Center aligning text within an accordion button using Bootstrap 5 framework

I'm struggling to center align the text inside the accordion button while keeping the arrow on the right side Here is an example of what I'm trying to achieve: https://i.sstatic.net/2brrY.png In the Bootstrap 5 documentation, there's an e ...

htmlcssbootstrap-5

Learning to utilize regex patterns in substitution tasks is an essential concept in programming

I need help with decoding a mysterious message: ********is******ri****f******s**d******s****du****? The message seems to have been encoded using a complex search pattern: ([y\s]|[wh]|[apl]|[oo]|[mb])* Along with a replacement pattern: *$2* Wou ...

javascriptpythonregexstringpcre

What is the process for implementing a Content Security Policy to enable the loading of external JS files from a CDN in ExpressJS?

When working with ExpressJS, the HTML file is loaded in the following manner: app.use(express.static(__dirname + '/src/templates/')); Within the HTML file, here is an example of a meta tag containing Content Security Policy: <meta http-equiv= ...

javascriptexpresscontent-security-policy

I'm having trouble with my "alert()" function in Vue.js

I am new to using Vue and I am attempting to trigger an alert function when a button is clicked. However, I keep encountering the error message Uncaught ReferenceError: addTask is not defined. Below are the codes I have written: <template> ...

javascriptvue.jslaravel-8

Incrementing a counter in javascript and triggering another action when the counter exceeds a specific threshold

I am a beginner in jQuery and JavaScript. I am looking to create a variable in JavaScript that increments by 1 every second. Here is what I have done so far: function run(){ timer++; }// run ends here setInterval(run,1000); O ...

javascriptjquery

Nested tables in CSS

Creating a Gridview with two nested Gridviews in separate cells may result in some CSS inheritance issues. Each row of the table contains these nested Gridviews, but trying to isolate their style using CssClass doesn't always work effectively. Is the ...

c#.netcss

traverse through numerous URLs using rvest in R

Looking to scrape data from a series of 9 URLs. Each URL has an offset value that changes as you navigate through pages. The goal is to loop through each page, scrape the table data, and stack it together using rbind in sequence. Lapply is preferred over ...

htmlrurlweb-scrapingrvest

Implementing Object Value Assignment to an Element Using jQuery

I recently received a set of data via an API request: https://i.stack.imgur.com/YGe2D.jpg In order to display this data as selectable options, I included the following code snippet in my AJAX script: $.each($(value.routes), function(index, route){ $ ...

jqueryajaxhtmlobject

The data binding in $rootScope was unable to retrieve the correct value

I have created a demonstration to illustrate an issue where the value of curTpl changes when the select value is changed. However, despite this change, the value of curTpl remains unaffected! Check out the demo here ...

angularjsangularjs-scopeangularjs-ng-repeat

Having trouble with Vue image source file paths?

Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...

javascripthtmlvue.js

Determine the radius using three given points

I am in need of determining the radius at the corners of a rectangle based on some given data points along the curve. The image below provides a visual representation: https://i.stack.imgur.com/7FHq0.png How can I calculate the radius using these specifi ...

javascriptalgorithmgeometrycornerradius

What is the best way to vertically align a pseudo element image using CSS?

After looking for similar questions, none of the answers seem to be working for my specific issue. This is what I'm struggling with: I am attempting to insert and center a decorative bracket image before and after certain content in the following man ...

cssvertical-alignment

Is there a way to ensure that any updates made to the backend database are immediately visible in the browser?

Currently, I am facing an issue with my hardware scanner that is connected to a Windows computer. Whenever I scan an item using the hardware scanner, the Windows computer retrieves the price/information about that specific item. Then, I manually input this ...

javascriptdatabasewindowsbrowser

Group Hover by StyleX

I recently experimented with the innovative StyleX library and encountered a particular challenge. Can a group hover effect be achieved for a component solely using this library? For instance, let's assume we have the following component in Tailwind ...

javascriptreactjstypescriptstylexjs

Handling empty values in JSON data when sending it to the controller through AJAX

Attempting to transmit the following JSON data from View to Controller: { "allselected": false, "selectedIds": ["", "all"], "targetControl": "Studieniva", "targetSource": "studienivalist", "dependency": [{ "name": "ShopNo", ...

javascriptc#jqueryajaxasp.net-mvc

Instructions for designing a striking image header on a webpage with the combination of PHP and HTML

I am working on creating an Image Header Page in PHP, where I can include some URLs with non-SSL to ensure a fully SSL encrypted webpage. One example of this is the service provided by DuckDuckGo: http://images.duckduckgo.com/iu/?u=http://4.bp.blogspot.co ...

phphtmlimagesslheader

The CORS problem arises only in production when using NextJS/ReactJS with Vercel, where the request is being blocked due to the absence of the 'Access-Control-Allow-Origin' header

I've encountered a CORS error while trying to call an API endpoint from a function. Strangely, the error only occurs in production on Vercel; everything works fine on localhost. The CORS error message: Access to fetch at 'https://myurl.com/api/p ...

javascriptreactjsnext.jscors