ng-options is not compatible with an object as a source

It seems like there should be a simple solution to this issue, but I'm struggling to get ng-options to work with my model object. Essentially, I want to populate my select dropdown with a list of countries. Each option value should be a country code and the label should display the country name:

My HTML Code

<div ng-app="demoApp">
    <div ng-controller="UserInfoCtrl">
        <h1>User Info</h1>

        <label>Email</label>
        <input type="text" ng-model="user.email" />
        <br />

        <label>Country</label>
        <select ng-model="user.country" ng-options="code as name (code, name) in countriesByCode">
        </select>

        <pre>{{ user | json }}</pre>
    </div>
</div>

My JavaScript Code

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

demoApp.controller("UserInfoCtrl", function($scope) {
    $scope.user = { };

    $scope.countriesByCode = {
        'AF' : 'Afghanistan',
        'CA' : 'Canada',
        'RU' : 'Russia'
    };
});

For more information, check out the jsfiddle link.

Answer №1

Your statement is missing a 'for' keyword

use code as name for (code, name) in countriesByCode

Check out the fixed demo here: http://jsfiddle.net/8XJX4/2/

I hope this clears things up.

Answer №2

Apologies for the error in my previous explanation. The correct syntax should be:

code as name for (code, name) in countriesByCode

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

Manipulating arrays of objects with handlebars.js

I need help with my node.js app that is returning JSON data for computers. { computers: { john: { cpu: "intel", ram: "8MB", hd: "1TB" }, jane: { cpu: "intel", ram: "12MB", hd: "500GB" }, mary: { ...

What is the best way to include multiple views in a main HTML template in Angular?

Is there a way to load two HTML files into a base HTML file? Essentially, I have a base HTML file with a header and content view, and I want to load different HTML files into each of them. Here is the base HTML file structure: <div class="container"> ...

myObject loop not functioning properly in Internet Explorer version 10

Could someone please point out what is wrong with this code snippet? HTML: <div id="res"></div> Javascript: var myObject = { "a" : { src : "someimagepath_a.png" }, "b" : { src : "someimagepath_b.png" }, }; va ...

Automatically submitting forms without having to refresh the page

I have been searching for answers online, but none of them seem to help me. Additionally, I am struggling to grasp the concept of Ajax. I need everything to happen on a single page without any refreshing until the entire form is submitted. <form id=" ...

"Unlocking the Potential of ReactJS: A Guide to Setting Focus on Components Once They Become

My code had a <div> with a child component named SocialPostwithCSS, and when onClick was triggered, it would hide the div, set the state to editing: true, and display a <textarea>. I used this.textarea.focus with a ref={(input)=>{this.textar ...

Ways to reverse engineer HTML, CSS, and JavaScript code into HTML format

Help needed! I am trying to edit the user interface but all the code is in one line and I can't figure out how to decompile it back to its original state. Can anyone offer assistance with this? <html lang="en"><head><meta char ...

Protractor is incorrectly reporting that checkboxes are not selected after being enabled again

I am working with a series of checkboxes and have implemented an 'all' checkbox at the top. The functionality is such that toggling the 'all' checkbox will deselect or select all other checkboxes. Initially, the 'all' checkbo ...

Extract JSON data from Python API

Currently, I am delving into web programming and have created a Python API that queries an SQL database to return a JSON. The functionality of the API is as expected. In parallel, I've developed a controller where I execute a GET request to utilize t ...

Using the information retrieved from Google Place Autocomplete and saving it for future reference

I am interested in utilizing the Google API "Place Autocomplete" widget to enhance user experience on my website. The specific widget I have in mind can be found here. My goal is to streamline the process of obtaining property addresses from Real Estate A ...

The choice between invoking a function within a route handler or employing a middleware for the task

I am currently exploring a potential difference in coding approaches. Let me illustrate this with an example excerpted from the express documentation: https://expressjs.com/en/guide/using-middleware.html function logOriginalUrl (req, res, next) { console ...

How can I easily send typed text to a server using AngularJS?

I know how to accomplish this in JQuery by checking the event keypress, but how can I do it in Angular JS? I want to make an AJAX request to the server for searching data via ElasticSearch. Do I need to use a timeout for typing text event? Is the example ...

The issue with the Angular UI Bootstrap v0.11 datepicker popup functionality being unresponsive

Recently upgraded to UI Bootstrap version 0.11 and encountered an issue with the datepicker-popup functionality not working properly. Previously, everything was functioning correctly with version 0.10. Does anyone have insight into what changes were made ...

Leveraging Material-UI: Utilize props in useStyles method while employing Array.map()

After delving into the world of passing props to makeStyles in Material-UI, I stumbled upon this insightful answer. The solution presented involves passing props as a variable, which is quite useful. However, my aspiration is to extend this functionality t ...

My AngularJS app is refusing to launch when using the npm start command

Yesterday, I was working through the AngularJS tutorial for angular-phonecat on my MacBook and everything was running smoothly. However, both npm start and npm test required sudo to function properly, which seemed odd. Today, I decided to clone the origin ...

AngularJS - Sending event to a specific controller

I am facing an issue with my page where a list of Leads each have specific actions that are represented by forms. These forms can be displayed multiple times on the same page. Each form has its own scope and controller instance. After submitting a form, an ...

Sending an array from one page to another with Vue

I'm facing the challenge of passing an array from one page to another. When accessing the next page on form submission using this.$router.push('path'), is there a way for me to also transfer the array so that it can be accessed on the new p ...

Navigating JSONP using jQuery

I'm encountering an issue where I can see the correct response in Firebug, but I'm unable to access the data it returns. I need some guidance on how to achieve this. Specifically, I'm attempting to place the timestamp of an entry into a div ...

Angular 10 does not reflect changes in the array when they occur

My component receives an array of offers from an Observable. However, when the list is modified (a offer is deleted), the component's list does not update accordingly. I attempted to use ngOnChanges to resubscribe to the list and update it in my comp ...

Transitioning from using sendfile() to sendFile() function within the Express framework

Here is the code snippet I am using: router.get('/image',(req,res,next)=>{ const fileName = "path_to.jpg" res.sendfile(fileName,(err)=>{ if (err) { next(err); } else { console.log('Sent:', fileName); } ...

Tips for validating email addresses and enforcing minimum length requirements

In order to validate email input for the correct format and ensure minimum length validations for first name and password, I am looking to utilize only bootstrap. While I have successfully implemented required field validations for the inputs, I am unsure ...