ng-repeat not displaying any content

I am trying to create a form where users can input extra information by adding new rows, but I am struggling with generating the first row

<div ng-repeat="row in rows">
<input type="text" placeholder="name"><input type="tel" placeholder="tel">
</div>

$scope.rows = {
   '1':1
};

}

http://plnkr.co/edit/qNPYKwdRPNXRrqphEfdz?p=preview

Answer №1

To resolve the issue, it is necessary to delete the ng-controller="personController" attribute from the html tag.

The AngularJS framework is looking for the specified controller, which does not exist, resulting in an error being displayed on the console.

Check out the updated plunker here
: http://plnkr.co/edit/N14qOlvzPF8eIuPj1I4U?p=preview

Answer №2

Within your Plunker, the HTML contains a reference to a controller that is non-existent.

Please update:

<html ng-app ng-controller="personController">

To:

<html ng-app>

Additionally, within your controller, you are assigning a JSON object to the scope.

$scope.rows = {'1':1};

It might be better to use a JSON array instead:

$scope.rows = [
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter","lastName":"Jones"}]

Best regards, Ian

Answer №3

The code includes ng-controller="personController" without any actual code for the controller.

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

Update all field values in Redux-form version 6.0 and above

I am attempting to update several values in redux-form. They are stored in a single object, and I want to replace the current redux-form state values with those from my object. One method I have tried involves using this.props.reset() followed by multipl ...

The AngularJS script is throwing an error that states "ReferenceError: Invalid left-hand side in assignment

While attempting to establish a connection with a webservice, I made an attempt using AngularJS $http option. However, when testing it out, I encountered an error in the console of my Chrome browser: ReferenceError Invalid left-hand side in assignment. Des ...

Load data asynchronously using a promise in select2

Is there a way to load options for select2 asynchronously without using ajax requests? I want to retrieve values from a promise object instead. Currently, my code loads data in the query function, but this means that it queries the data with every keystrok ...

Using Moment.js to showcase historical information within a specified timeframe based on the user's timezone

I'm finding it challenging to properly handle historical data display: Current Situation: The database contains records stored in "YYYY-MM-DD HH:mm:ss" format in UTC+0 (MariaDB - DateTime type) A web application (using moment.js) allows users to se ...

What is the process for changing proxy settings through the command line when using Create React App?

I recently created a React project using Create React App and set up the development server to proxy API requests through the proxy setting in my package.json: ... "proxy": "https://dev-backend.example.com" ... However, I am looking ...

Tips for postponing the execution of inline javascript

Main page <script> $.ajax({ type: 'GET', url: 'ajax.php', context: document.body, success: function(data) { $("#content").html(data); } }); </script> <div id="content"></div> Ajax ...

Utilize CamelCase in jQuery for Better Code Readability

Upon examining the jQuery source code, I noticed an interesting use of camelcase: camelCase: function( string ) { return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); } // where: rmsPrefix = /^-ms-/, rdashAlpha = /-([\da- ...

Angular JavaScript does not take effect on elements inserted into ui-view

When transferring the code from main.html to index.html, the javascript functions smoothly. The click function successfully triggers the ripple effect. Link: Ripple Click Effect Google Material Design However, upon extracting the code to main.html and in ...

Looking for assistance with importing OBJ and MTL files into Three.js?

I'm encountering a strange issue while attempting to load an OBJ and MTL file in Three.js using the OBJMTLLoader() function and am unable to find a solution online. My project structure includes an index.html file and a js folder with all the necessar ...

NextJS: Issue: Accessing a client module from a server component is not allowed. The imported name must be passed through instead

My current NextJS setup is structured as shown below: app/page.js 'use client'; import React from 'react'; export default function Home() { return (<div>Testing</div>); } app/layout.js export const metadata = { title ...

unable to retrieve JSON sub-elements

I encountered an issue while attempting to iterate through the JSON object provided. When trying to access the content-items using page.content-items, I received an error message. Is it possible to access an object that has a key with "-" in its name? Co ...

"Unlocking the power of AngularJS translate: A step-by-step

I'm seeking answers to two questions. 1) How can I utilize angularjs translate with ng-repeat? Although my Json file works fine, the text does not display when using ng-repeat. Here is a snippet from my json: "rules":{ "points":[ {"t ...

Unlocking the Secrets of JSON Data Retrieval

Could someone assist me in extracting data from the json provided below? I have received a json data in the following format, where each record contains "{0}". My query is how can I retrieve data from this format or if there is a way to remove "{0}" from ...

Verifying if a dropdown option has been chosen through validation in JavaScript

Currently, I am working on implementing a validation block in my JavaScript code to ensure that users have selected a value before proceeding. If a value is not selected, I want to display a pop-up message prompting them to do so. function validate(form) ...

Installing npm without the need for Node.js can be achieved

Looking to set up an ASP.NET Core Web Application in Visual Studio 2015 and have plans to incorporate AngularJs2 with TypeScript editing. To make this work, I need to set up the npm Package Manager. Ideally, I want to install npm without node as I will n ...

What circumstances could lead to a timeout while executing sequelize in a Node.js environment?

Within my application built with Node.js version 10.15.0, I utilize the sequelize package (version 4.44.3) to establish a connection to a remote MySQL database. This application operates within a Docker container. However, after prolonged usage, I encounte ...

What is the main file that vue-cli-service utilizes for entry?

Interested in a project utilizing vue, webpack, babel, npm? You can launch it with npm run server. While exploring how this command functions, I came across vue-cli-service serve in the package.json file. But how exactly does vue-cli-service initialize ...

Travis is checking to see if the undefined value is being

My experience with jasmine testing has been successful when done locally. However, I am encountering issues on Travis CI where all the API tests are returning undefined values. Here is an example: 4) Checking Server Status for GET /api/v1/orders - Expecte ...

Creating TypeScript object properties dynamically based on function arguments

One of my functions takes in a variable number of arguments and creates a new object with a unique hash for each argument. Can Typescript automatically determine the keys of the resulting object based on the function's arguments? For instance, I ha ...

Utilizing hooks in node.js functions

Is there a way to apply before and after hooks on a function? I need these hooks to trigger whenever the function is called. While Express.js middleware concept works for routes, I require similar hooks for functions on the server side. function main(){ ...