Having trouble initializing and retrieving an array from the controller in AngularJS

I tried to set up and retrieve the array values from the controller.

Check out the fiddle here.

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

app.controller('carAppCtrlr', function ($scope) {
    $scope.vehicles = [{
        type: 'car',
        color: 'red'
    }, {
        type: 'bike',
        color: 'black'
    }];
};);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app='carApp' data-ng-controller='carAppCtrlr'>
    <ul>
        <li data-ng-repeat='v in vehicles'>{{v.type +" " + v.color}}</li>
    </ul>
</div>

Result

The values are not displaying correctly:

https://i.sstatic.net/Z96rV.png

Answer №1

Make sure to remove the semicolon at the end of your controller definition

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

app.controller('carAppCtrlr', function ($scope) {
   $scope.vehicles = [{
    type: 'car',
    color: 'red'
    }, {
    type: 'bike',
    color: 'black'
   }];
});

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

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

Exploring the functionality of angularjs filters with pre-set checkbox options

I'm trying to create a checkbox list to filter another list, but I'm running into some issues. Here is how I have set up my checkboxes: <input type="checkbox" ng-model="characteristics.nontraditional" ng-true-value="non-tradtional" ng-false-v ...

Transform a C# DateTime object into a JavaScript date format

In my Javascript function, I am handling a C# DateTime received from MVC. If the date is null, it should return "-", and if it's a valid date, it should be returned in the formatted date. IMPORTANT: The date must be sent in the specified format from ...

Reformat an array containing objects so that their structure is changed to a different format

Imagine a scenario where the data needs to be manipulated into a specific format called 'result' for easier display on the user interface. In this 'result', the month numbers are used as keys, representing each month's quantity. co ...

Exploring the connections between PHP, JavaScript, JSON, and AJAX

While this question may lean more towards conceptual understanding rather than pure programming, it is essential for me to grasp how these mechanisms interact in order to code effectively. My current knowledge includes: 1) PHP as a programming language ...

Utilizing a universal JavaScript array within the jQuery document(ready) function

After using jsRender to render the following HTML template, I encountered an issue with passing data values through jQuery selectors when submitting a form via AJAX. <div class="noteActions top" style="z-index: 3;"> <span onclick="noteAction(&a ...

How can Angular hide a global component when a particular route is accessed?

Is it possible to hide a global component in Angular when a specific route is opened? For instance, consider the following code: app.component.html <app-header></app-header> <app-banner></app-banner> <!-- Global Component I w ...

Extracting the value from an array

Here is the structure of my array (please disregard brackets/braces): "items" : [ "metadata" : { "pod" : pod1 } "spec": { "containers" : [ ...

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

Importing cookies directly into server actions in Next JS 13 is not possible for me

Currently, I am tackling a project using Next JS 13 and came across an issue pertaining to server actions. While server actions can be directly applied on form or button components, my personal preference is to define server components in separate files an ...

At times, the Ajax response may be lacking in content. However, the response tab in Google

My goal is to retrieve responses from an AJAX call and store them in the global scope for easy access throughout my website. var getOrderStatus = getOrderStatus(), getUserData = getUserData(), orderFormReady = $.when(getOrderStatus, getUserData), ...

Learn how to retrieve specific user information from a JSON file by implementing a button click feature within a custom directory using Angular.js

I am just starting to learn angular.js and I'm trying to figure out how to retrieve JSON data from a custom directory. My goal is to display the information of a specific user when a particular button is clicked, but so far I haven't been success ...

Attaching a string to a checkbox's value using AngularJS

After spending a few hours searching, I came across similar examples but couldn't get it to work. Within my JSON file, there is a property called "accessRight" with possible values of "full", "read", or "none". In my HTML, I have 3 checkboxes for "fu ...

How can PHP be used to decode JSON and transmit it to Javascript?

I am aiming to utilize the Twitter API in order to dynamically populate slides on a webpage with recent tweets without needing to refresh the entire page. Currently, my approach involves making an AJAX call every few seconds from a JavaScript function on ...

Issues with LocalStrategy not executing in passport authentication

I am currently facing an issue with authenticating using Passport and LocalStrategy. It seems like the strategy is not being called and when I log the user object in passport.authenticate, it returns "false". Below is my client-side code: logIn = () =& ...

Safari Glitch in Bootstrap 4

For a simplified version, you can check it out here: https://jsfiddle.net/dkmsuhL3/ <html xmlns="http://www.w3.org/1999/xhtml"> <title>Testing Bootstrap Bug</title> <!-- Bootstrap V4 --> <link rel="stylesheet" href="https://m ...

Steps for resetting a Bootstrap FormLearn how to reset a

Incorporating Bootstrap validations with AngularJs, I noticed that when my form is submitted, the fields are reset but all the validation messages still appear. My goal is to hide these validations upon form submission. Utilizing Bootstrap <div class= ...

Disable javascript when using an iPad

I'm working on a website with parallax scrolling that I don't want to function on iPads. Is there a way to prevent the parallax effect from happening when the site is accessed on an iPad? Any guidance on how to disable parallax scrolling based o ...

Encountering the Firebase issue with error code (auth/invalid-api-key)

I keep encountering the error message 'Firebase: Error (auth/invalid-api-key) ' despite having entered all the correct authentication details. ...