Include the controller in ng-repeat directive

I am facing an issue where I want to include a controller in my code, with the controller's name being included in the object received from ng-repeat.

Here is the array:

  $scope.components = [
    {
      name: "box",
      controller: "BoxCtrl"
    }
    /*other components*/
  ];

And here is the corresponding HTML code:

<ul>
  <li ng-repeat="c in components" ng-controller="{{c.controller}}">
      {{c.name}}
  </li>
</ul>

However, I am encountering the following error.

Does anyone have any suggestions on how to resolve this issue?

javascriptangularjsangularjs-ng-repeat

Answer №1

When using the ngController directive, make sure to provide an instance of a controller instead of just a string value. To properly implement this, follow these steps:

In your controller:

  $scope.components = [
    {
      name: "box",
      controller: BoxCtrl //Do not use quotes around the controller name
    }
    /*other components*/
  ]

In your view:

<ul>
  <li ng-repeat="c in components" ng-controller="c.controller">
      {{c.name}}
  </li>
</ul>

If needed, you can access a working example on Plunker here.

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

Re-sequence a contiguous array by mapping and filtering its elements

Within my React code, I have a list component that utilizes array.map to display a list of items. The list items have alternating backgrounds; every other item's background color is determined by whether the id field from the data structure is even o ...

javascriptreactjsmaterial-uiarray.prototype.map

Send HTML content to an Angular component for processing

I am looking to create a custom component called app-my-component, and I want it to be used in the following manner: <app-my-component> <div>Content goes here</div> </app-my-component> Furthermore, I would like to utilize this ...

javascriptangular

Retrieve the value of a variable within the .each() function in jQuery

I have the following code that is functional. However, when I uncomment the "if" statement, an alert pops up as soon as I enter something in the input field. I would like the "sum" value to trigger the alert only after I have entered values in all 3 inpu ...

javascriptjqueryvisualforce

Which is more effective for transferring data between pages: HTML5 storage or Angular services?

I'm currently exploring ways to transfer data between two pages that have Angular controllers. So far, I've discovered two methods for passing data: through an Angular service (similar to the example found here) using HTML5 storage opti ...

javascriptangularjshtml

Refresh React Components on the Fly (Solr)

I am relatively new to ReactJS In my React class, I have a function that is rendering multiple items: (Sample) var app = app || {}; app.Results = React.createClass({ componentDidMount: function () { }, handleUpdateEvent: function(id) ...

javascriptajaxreactjssolr

Iterating through JavaScript objects using the foreach method

I'm having difficulty with a JavaScript algorithm. I am working with Vue as my framework and state management tool. I have an object that needs to be 'calculated' as variants. For instance, I have 3 objects with some values as arrays, like ...

javascriptvue.js

A comprehensive guide on implementing Three.InstancedMesh in Aframe

Currently, my project is focused on incorporating instancing in Aframe using the ThreeJs InstancedMesh. I'm following the example provided in this link: https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_dynamic.html Highlighted ...

javascriptthree.jsaframevirtual-reality

Conceal any elements that do not belong to a filterable array?

Is there a more efficient method to hide elements that do not have a status within a specified filter array? Currently, I am filtering the elements, checking their status, and then applying a hidden class if it is not in the filter array. JavaScript var ...

javascriptjquery

Tips for enabling custom tags in the tinyMce editor

<textarea><div style="margin-top: 15px;"> <div class="dropdown "> <p> hello my name is <Enter Your Name> </p> <p> hehe</p> </div> </div> ...

javascriptangulartypescripttinymcetinymce-5

create-react-app is displaying an error message stating, "In order to utilize this application, JavaScript must be enabled."

I am using express to build my API. Within my project, I have a folder named app and another named server. The app folder serves as the client application, built with create-react-app as the boilerplate, while the server folder contains the express.js app ...

javascriptnode.jsreactjsexpress

Instantly summing up two numbers with javascript

In my web development work using Visual Studio 2008, I encountered an interesting challenge. On a webpage, I have three textboxes labeled "Price," "Quantity," and "Amount." The task at hand is to calculate the value of "Amount" by multiplying the values ...

javascriptvisual-studio-2010

What is the best way to display a series of interconnected tables in a specific order within MySQL using recursion?

Given: table dependencies listed in sequence (Generated by MySQL Forward Engineer script) tableA, NULL tableB, NULL tableB, tableA tableC, NULL tableC, tableA tableD, NULL tableD, tableC I am working with a MySQL database containing over 40 relational tab ...

javascriptmysqlnode.js

Update a specific element within Angular framework

Just starting out with angular and facing a seemingly simple issue that I can't seem to solve despite trying various solutions found on SO. I have created a login component where upon submission, the user is redirected to their profile page. While I a ...

javascriptangulartypescriptangular-components

Send a quick message with temporary headers using Express Post

When creating a response for a post request in Express that returns a simple text, I encountered an issue. var express = require('express'); var app = express(); var bodyParser = require("body-parser"); var multer = require('multer') ...

javascriptnode.jsmongodbexpress

Obtaining the Tinymce Editor Instance using WordPress JavaScript

I am currently in the process of developing a Wordpress plugin that adds a customized metabox below the post editor, including a button. Additionally, the plugin loads a Javascript file just before the closing </body> tag. OBJECTIVE My main goal wi ...

javascriptjquerywordpresstinymce

Encountered an Error in Express.js: Unable to POST /users

I am currently in the process of learning the MEAN stack by following a tutorial and have encountered an error. Unfortunately, I am having difficulty identifying exactly where I went wrong. While attempting to test routes in Postman by creating a user, I ...

javascriptmongodbexpresspostman

Storing a date in MySQL using Vue.js and Node.js

My current tech stack consists of nodejs and express.js for the backend, vuejs for the frontend, and mysql as the database. I am facing an issue where I cannot send a date retrieved from localStorage to my mysql database. Whenever I try to send the date, ...

javascriptmysqlnode.jsvue.js

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...

javascriptcssfirefox

AngularJS Modal Button

After adding a button and writing the necessary code for implementing a modal in AngularJS, I encountered an issue where the modal was not displaying as expected. Below is the HTML code snippet that I used: <body> <div ng-controller="Mod ...

htmlangularjs

Deploy a Next JS website within a subdirectory using traefik

I'm having trouble publishing a website in a subfolder (example.com/sitename) using Traefik. The website is built with Next JS. When I deploy, all script links in the built site ignore the folder (sitename). For example, a js script named generatedf ...

javascriptnext.jstraefik