AngularJS: Why aren't my ng-options appearing?

Using AngularJS with a dropdown, all the options are displaying correctly when selected but their names are not showing up.

I suspect there might be an issue with the ng-options value, but I am struggling to pinpoint it.

Here is the snippet of the view:

    <select ng-options="city as city.shops.code for city in cities" ng-model="selectedCity"></select>

    <div class="shopsContainer">
        <article class="shop" ng-repeat="shop in selectedCity.shops">
            <h4>{{shop.name}}</h4> 
            <h4>{{shop.address1}}</h4>            
        </article>
    </div>

Snapshot of the controller - object data feeding ng-options:

$scope.cities = [  
                {
                    code: "Barranquilla", 
                    shops: [
                        {
                            "name":"C.C. Unico Outlet",
                            "address1":"Local 22",
                            "address2":""
                        }               
                    ]
                },
                // More city data entries...
            ];

Answer №1

After reviewing your json, it appears that the property ciudad.tiendas.code does not exist. To achieve the desired outcome, you may want to consider the following alternative:

<select ng-options="ciudad as ciudad.code for ciudad in ciudades" ng-model="selectedCity"></select>

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

Why won't the function activate on the initial click within the jQuery tabs?

When creating a UI with tabs, each tab contains a separate form. I have noticed that when I click on the tabs, all form save functions are called. However, if I fill out the first tab form and then click on the second tab, refresh the page, and go back t ...

The process of locating a textarea by its id becomes obsolete when integrating CKEDITOR

The data table has editable cells, where clicking on a cell will trigger a bootstrap modal to display with a textarea containing the text retrieved from the database. Snippet of the table structure: <table class="table table-striped table-hover" id="t ...

Steps for sending an API request using the WSO2 Enterprise Service Bus

After carefully following the instructions provided in this tutorial, I attempted to invoke the API through the ESB using port 8280. However, I encountered error code 202 despite not specifying any fault sequence. I diligently followed each step and verif ...

Authentication failure in Asp.Net MVC authorization during Web API request

My ASP.Net MVC application is set up with the default Visual Studio template, using individual user accounts through asp.net identity. When a user logs in and makes calls to MVC Controllers, they are authenticated and I can check for claims by casting to S ...

What is the timing for when the SignalR connection is terminated from the browser?

Currently, I am developing a chat application using SignalR 2.0, like many others in the same field. In my Win8.1 application, when the user closes the application, the hub receives the OnDisconnected event and removes the user from the list on the hub. A ...

Incorporate various components within a loop onto a canvas

I am working with multiple canvas elements: <canvas class="screen" width="250" height="250" data-json="{{json_encode($board)}}"></canvas> Within my JavaScript code, I encounter the following issue: var canvas = document.getElementsByClassNa ...

Changing the title of a webpage dynamically with dropdown menu selections using AngularJS

Seeking assistance with dynamically changing the title of an HTML page based on a selection from a drop-down menu populated by categories retrieved from a remote database using PHP and Ajax in AngularJS. When a category is clicked, I want the page title to ...

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

Can anyone recommend a reliable JavaScript library for creating resizable elements?

I am looking to incorporate resizable functionality for a textarea. While I have experimented with jQuery UI's "resizable" feature, it doesn't quite meet my needs. I appreciate jQuery, but the resizable option falls short in allowing me to resize ...

Exploring Bot Framework (v4) - Uncovering the process of retrieving state data through custom prompt validation

I'm trying to create a custom prompt validation where I need to access the state in order to compare it with the user's input. Despite searching through Microsoft documentation and some sample codes, I couldn't find out how to achieve this. ...

JavaScript-powered Chrome Extension designed for modifying CSS styling

Like many others, I've embarked on creating a Chrome Extension to modify the CSS of a specific webpage. Despite reading through various threads, my approach is a bit more complex than what has been discussed. The page I want to style features a sele ...

Utilize the toggle feature to modify data displayed from the database

My webpage displays data from a database using PHP, and it works well. However, I want to add functionality that allows users to edit the displayed information by toggling between text and input form. When a user clicks on an 'Edit' button, I wan ...

Refreshing a webpage using PHP, Javascript's location.reload, and an HTML input field

I am currently working on a page that executes a MySQL query when a button is clicked. The query results in about 6 columns and approximately 100 rows being displayed. My goal is to allow users to sort the query results by clicking on the column headers, ...

Create a soft focus on the background sans any filters

I am in the process of developing a website and have implemented code to blur out the background: CSS #background{ background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o ...

A fresh checkbox was added to the page using Jquery Switchery to disable it

I'm having trouble disabling the Switchery checkbox. When I try to disable it, another Switchery checkbox appears on the page along with the one I previously defined: <div class="form-group"> <label class="col-md-2"> ...

Encountering a missing value within an array

Within my default JSON file, I have the following structure: { "_name":"__tableframe__top", "_use-attribute-sets":"common.border__top", "__prefix":"xsl" } My goal is to add values by creating an array, but I am encountering an issue where my ...

Determine the count of child directives within the parent directive prior to the execution of the link function

Is there a way to determine the number of child directives that will be executed when using one directive with multiple child directives (using require)? Instead of counting each time a child directive is executed in the link function, I am looking for a ...

When the user clicks on the login text field or password field, any existing text will

Currently, I am working on the login section of my website and I would like to implement a similar effect to Twitter's login form, where the Username and Password values disappear when the Textfield and Password field are in focus. I have attempted to ...

Finding the nearest highest value in an array with multiple columns

Hello there My current challenge involves testing an accumulated value (var goal) from specific input fields against the closest highest value of ['size'] in an array. Here is a snippet of code I am working with: // JavaScript Code Block var v ...

Utilizing AngularJS in combination with Bootstrap's user-friendly UI date

Is there a way to manipulate the datepicker object so it can open and close as needed? Also, how can I access the datepicker object in a different directive within AngularJS? ** HTML ** <input type="text" class="form-control" uib-datepicker-popup="{{f ...