Encountered an error loading the ng-model for a dropdown list in AngularJS

In my JSON object, I have a list of "items" that I want to display in a dropdown menu. However, when using ng-repeat, the dropdown list is appearing blank.
To see the code I've used, you can visit this link.
HTML:

<div ng-controller="Ctrl">   
        <div ng-repeat="item in items">
            <select ng-model="item.shareToOption" ng-options="c.value for c in shareToOptions"></select>
        </div> 
    </div>

JS:

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

    function Ctrl($scope) {
            $scope.items = [
                { "shareToOption" : {id:1,value:"AA1"} },
                { "shareToOption" : {id:2,value:"AA2"} },
                { "shareToOption" : {id:3,value:"AA3"} },
                { "shareToOption" : {id:4,value:"AA4"} }
            ];

            $scope.shareToOptions = [
                {id:1,value:"AA1"},
                {id:2,value:"AA2"},
                {id:3,value:"AA3"},
                {id:4,value:"AA4"},
                {id:4,value:"AA5"},
                {id:4,value:"AA6"},
                {id:4,value:"AA7"}
            ];
    }

Answer №1

In order to optimize your ng-options, it is recommended to implement the new track by expression. Here is an example of how you can do this:

<div ng-controller="Ctrl">   
    <div ng-repeat="item in items">
        <select 
          ng-model="item.shareToOption" 
          ng-options="c.value for c in shareToOptions track by c.id"
        ></select>
    </div> 
<div>

Remember to ensure that you are working with Angular 1.2 or later versions.

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

`The never-ending meteor cycle`

My goal is to modify the attributes of a Collection so that they have absolute positions before being rendered. I want the first item in the collection to have a top value of 0 and a left value of 0, the second item with a top of 0 and a left of 20, and so ...

Exploring the World of Popper.js Modifiers

Within our React and Typescript application, we integrate the react-datepicker library, which utilizes popper.js. Attempting to configure PopperModifiers according to the example provided here: . Despite replicating the exact setup from the example, a typ ...

Equals to three times [3] Triple sign

Similar Question: PHP vs Python: Which is the better programming language? I posted an inquiry here and received an insightful response like this: $(window).on("scroll", function () { if ($(this).scrollTop() > 100) { $("header").addClass(" ...

Unable to invoke modal popup from master page on child page

Incorporating a modal popup to display a login box has brought up an interesting challenge. The modal popup is situated in the master page and connected to a LogIn link. However, now there is a need to invoke the same modal popup from a child page using a ...

Avoiding server requests in Firefox by refraining from using ajax

I've implemented the following jquery code: $("#tasksViewType").selectBox().change( function (){ var userId = $('#hiddenUserId').val(); var viewTypeId = $("#tasksViewType").val(); $.post('updateViewType& ...

Unable to save a string value from a function to MongoDB is unsuccessful

I've hit a roadblock. Working tirelessly to solve a persistent bug, but it feels like I'm getting nowhere. What am I missing? My goal is clear - once the user submits a form with the enctype of "multipart/form-data", I want to extract t ...

The custom policy used in AWS CloudFront getSignedCookies is either invalid or the argument type is incorrect

I need assistance crafting a custom policy for the getSignedCookies function, but I am unsure about the correct format the policy should adhere to. Below is my current code snippet: import { getSignedCookies } from "@aws-sdk/cloudfront-signer" ...

When resizing the window in IE8, the function DIV offsetWidth/Width/innerWidth returns a value of zero

My page is filled with many elements, one of which is the following DIV: <div id="root"> .................. <div id="child1"> ............. </div> <div id="child2"> ............... </div> & ...

Executing NodeJS commands and Linux commands via Crontab scheduling

I have an EC2 AWS instance where various commands and scripts work perfectly, but do not execute within a crontab. The Crontab contains: 15 03 * * * pythonscript1.py 45 03 * * * pythonscript2.py 00 05 * * * gsjson 1z5OlqsyU5N2ze1JYHJssfe1LpKNvsr4j8TDGnvyu ...

What is the best way to reference a nested child property within a directive's scope?

Hello my beloved pals, We have the ability to connect a scope property of a directive to the value of a DOM attribute. Here is an example that demonstrates how it works: module.directive 'MyDirective', -> scope: directiveVar: '=& ...

Is there a more efficient method for managing nested promises?

I am currently facing a challenge as a new developer. In the scenario I'm working on, there is a possibility of encountering a lock issue when the user saves their work. The user should be given an option to override the lock if it occurs. Since REST ...

Is transferring information to the factory from the controller feasible?

My factory definition: myAppServices.factory('ProfileData',['$http', function($http){ return{ newly_joined:function(callback){ $http.get( //myUrl will be an url from controller. myU ...

Guide for implementing Ajax-based login functionality using Spring Security in a Grails and AngularJS application

I am currently working on developing a user form that utilizes Ajax requests to log in to the server. Within my Angular app, the POST function is structured like this: $http({ method: 'POST', url: '/j_spring_security_check', ...

How to retrieve data from a JavaScript array in a separate JavaScript file

In my checklistRequest.js file, I populate an array and then try to access it in my Termine_1s.html file, which includes JavaScript code. Although I can access the array, when I attempt to iterate through it, only single digits are returned instead of stri ...

Using Javascript function with ASP.NET MVC ActionLink

I need help with loading a partial view in a modal popup when clicking on action links. Links: @model IEnumerable<string> <ul> @foreach (var item in Model) { <li> @Html.ActionLink(item, "MyAction", null, new ...

What is the process for triggering an action on the existing instance of an element?

Is it possible for HTML content to only appear in the element where it was clicked? Currently, when there is more than one instance of this class, the content shows up after each element with the class movieend. (Each <div class="moviepanel"> contain ...

What is the best way to retrieve the 'items' data stored in this list?

I am working with a list of data that includes 6 categories - bags, shoes, girls, boys. Each category contains the same type of data like id, items (with properties: desc, id, imageUrl, name, price), routeName, and title. My goal is to loop through all ca ...

What purpose does the 'shape' function serve within yup?

While many examples of Yup utilize the shape method, I have found the documentation to be somewhat unclear on why this approach is preferred and what exactly it accomplishes. Could someone clarify the distinction between a schema constructed with Yup.obje ...

Execute the javascript code when the radio button is selected

For my Rails app, I want a straightforward feature where a JavaScript function runs only if a radio button has been selected. The user should be presented with multiple radio buttons without any default selection. Upon clicking a "Run" button, the followin ...

Arrange objects based on the most recent addition using Vue JS

I am working with a Vue array that consists of 3 objects with names and rates. I have already implemented a function to sort the items by rate: methods: { sortByRate() { this.complejos = this.complejos.sort(function(a, b) { return a.rate - ...