My controller for angular seems to be malfunctioning

I am fairly new to AngularJS.

Although I have created a controller and passed the data, it seems that my controller is not functioning properly. Can someone please assist me?

This is my code:

The AngularJS code snippet looks like this:

var app = angular.module('myApp', []);

  app.controller('myController', function($scope) {
    $scope.person=[
      {name:"Raj", gender:"M"},
      {name: "raja", gender:"M"},
      {name:"sevitra" gender:"F"}
      ]


  });

The HTML code snippet is as follows:

<body ng-app="myApp">
    <div controller="myController">
      <a href="javascript:void()">
        <button>Add New Field</button>
      </a>
      <div class="advance-menu-wraper">
        <ul>
          <li>
          {{"person[0].name"}} + {{"person[0].gender"}}
            <div class="head-text">Field 1:</div>
            <div class="description-text">
              <a href="#">How many staff members are proficient in Oracle programming</a>
            </div>
          </li>
          <li>
            <div class="head-text">Field 2:</div>
            <div class="description-text">
              <form name="addForm">
                <textarea rows="2"></textarea>
                <div class="send-btn">
                  <button>
                    <i class="fa fa-check">Submit</i>
                  </button>
                </div>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>

Here is the demo link

Answer №1

Your code needs some adjustments:

{{"person[0].name"}} + {{"person[0].gender"}}

produces: "{{"person[0].name"}} + {{"person[0].gender"}}" in your html.

You should update the expression to:

{{person[0].name + person[0].gender}}

Furthermore, there is a syntax error in your array. The last object is missing a comma.

Here is a correct plunkr example for reference: http://plnkr.co/edit/R9ojp8TWd7AloRrlPlZh?p=preview

Answer №2

To achieve the desired outcome, it is essential to implement the ngController directive

Revise

<div controller="myController">

with

<div ng-controller="myController">

Answer №3

  1. {name:"sevitra" gender:"F"} needs to be corrected as {name:"sevitra", gender:"F"}
  2. controller="myController" should instead be ng-controller="myController"
  3. {{"person[0].name"}} + {{"person[0].gender"}}
    should be changed to
    {{person[0].name}} + {{person[0].gender}}

Answer №4

There are three things that need to be changed in my opinion

First, update the controller as shown below:

app.controller('myController', [ '$scope',function($scope) {

Next, modify the

<div controller="MyController">
to
<div ng-controller="MyController"

Lastly, remove the quotation marks from {{ " Person[0].Name "}} and {{ " Person[0].gender "}} so they appear as {{Person[0].Name}} and {{Person[]0.gender}}

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

applying a timeout for the .on(load) event

My goal is to dynamically load images using .on('load') in the script below: .on('load', function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken i ...

What is the method for generating prominent axes in flot, the jQuery plugin used for creating graphs?

Similar Inquiry: display x-axis and y-axis lines with out the grid lines using flot Is there a way to enhance the visibility of the x- and y-axis in flot by making them bold and adding arrows? Currently, the axes are not displayed by default. Thank yo ...

Utilizing a pre-made text template (customizable) within a form

Seeking clarity on the feasibility of a task in Angular, I turn to this forum for assistance. I am attempting to pre-fill a message in my application form upon page load. The desired text should include: Hello {{ recipient }}, we have an appointment sch ...

Exploring the use of $ in the outcome of a json for jQuery autocomplete functionality

Trying to implement auto complete functionality. Here is the URL I need to read JSON from: http://openscan.addi.dk/2.0/?action=openScan&field=phrase.title&lower=hest&limit=10&outputType=json After receiving the result, I'm attempting ...

Is there a way to update the value of an <input> element dynamically?

There is an input in a datalist that I am working with. <input type="text" value="1" id="txtcount"> I am trying to obtain the new value of the input when the text changes. I attempted to use the following code, but it did not work as expected. &l ...

What is the best way to iterate through JSON objects stored in a single location?

Currently, I am dealing with a single JSON object structured as follows: Object --> text --> body --> div Array[20] --> 0 Object --> text --> body --> div Array[20] --> 1 Object --> text --> body --> div Array[20] --> . ...

Highlight main title in jQuery table of contents

I have successfully created an automatic Table of Contents, but now I need to make the top heading appear in bold font. jQuery(document).ready(function(){ var ToC = "<nav role='navigation' class='table-of-contents vNav'>" + ...

The cordova module "cordova/plugin/SmsInboxPlugin cannot be located."

I am currently experimenting with the sms-reception-plugin implementation. After creating the plugin.xml <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="cordova.plugin" version="0.1.2" > <name>SmsReception</name> & ...

The Angular component router-outlet is not recognized as a known element

I have encountered an error message: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add ...

Verifying X-editable input in Laravel (Server-side)

I've successfully integrated x-editable into my webpage (). When I click on a field, it becomes editable inline, allowing me to make changes and submit them to a POST URI. Currently, I am sending three key-value pairs: array:3 [▼ "name" => "n ...

Combining CSR and SSR in the next iteration of our project will

In my application, I have three main user roles: Consumer, Merchant, and Admin. I want the pages that Consumers access to be SEO friendly and server rendered. However, for Merchants and Admins, I prefer them to be client rendered with their own respective ...

Data is not appearing as expected in the React component when using the data

I'm currently facing an issue while working with MUI. I am able to retrieve the list in console.log, but nothing is being displayed on the screen - no errors or data, just the console.log output. Here is a snippet of the data that I am receiving: ...

Using AngularJS to Extract JSON Data from a Table in an HTML Document

In the context of angularjs: I have a table with 2 fixed columns (ID & Comment) and additional columns that are added dynamically by the user clicking a button. The user can input data into the rows of this table, and I need to extract/ read this data. H ...

Tips for adding and deleting elements after cloning in jQuery

I'm trying to achieve a layout similar to the one shown in this picture. It should display a delete button for each item and an add button to add more items. Check out the example here. I have managed to display the buttons individually, but I'm ...

I am facing issues connecting my Express Node server to my MongoDB database using Mongoose

Starting my backend journey, I keep encountering the same error with my server.js --> // Step 1 - Create a folder named backend // Step 2 - Run npm init -y // Step 3 - Open in VS Code // Step 4 - Install express using npm i express // Step 5 - Create se ...

Implementing AJAX requests in jQuery DataTable with ASP.NET MVC

For some time now, I have been using the jQuery DataTables 1.10.13 plugin. Recently, I encountered an issue related to the ajax data source for my HTML table. This is how I initialized jQuery DataTable inside Files.cshtml <script language="javascript" ...

Ways to display data from specific columns using their names in a pair of dropdown lists

I am faced with the challenge of creating a drop-down menu containing column names from a database table. In addition, I need to implement another drop-down menu. My goal is to have the values of the selected column name from the database table displayed ...

The Angular controller fails to display any data when inserted within double curly braces on the HTML page

I have been working on a basic binding application using TypeScript. I created a controller called 'bugCtrl' and it appears to be functioning correctly in debug mode (with console.log and alert statements). Below is the HTML code from my page: & ...

Add to Firebase reference using AngularFire

Imagine I'm constructing a never-ending scroll of articles. The article's ID is obtained from the URL: var id = $stateParams.id; I aim to startAt that specific index in my Firebase collection and restrict it to 10 items: var limit = 10; var a ...

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficul ...