Using Angular with ng-options for ng-model

Struggling to set the default option in my ng-options/ng-model. Any advice?

The dropdown is populating correctly but the default option is missing, indicating an issue with ng-model implementation. Can anyone assist?

I'm using ng-repeat to iterate over an array within a table:

$scope.dumpsters = [
    {id:"1", sub_customer: 'a'},
    {id:"2", sub_customer: 'b'},
    {id:"3", sub_customer: 'c'}
]

For simplicity, there's a separate array of sub_customers:

$scope.subCustomers = [{description:'a'}, {description:'b'}, {description:'c'}];

In each row of the table, there is a column containing this select element:

<select ng-model="d.sub_customer" ng-options="v.description for v in subCustomers" ng-change="updateCustomer(d.sub_customer, d.id)"></select>

Answer №1

If you're looking to utilize the select as feature, make sure that your object references are a match. If we assume that the description field is what needs to match, you can simply use this code:

<select ng-model="d.sub_customer" 
     ng-options="v.description as v.description for v in subCustomers" 
     ng-change="updateCustomer(d.sub_customer, d.id)"></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

Tips for including the current user's data when saving in a Django model

I'm in the process of developing a compact Django/AngularJS application where users can create accounts, browse through existing posts, and add their own content. You can check out the current version of the app on GitHub For the models, visit: mode ...

Show a stack of canvas elements on top of one another

I am working with 2 canvas elements that are identical in size and position. The first canvas is meant to serve as the background, while the second one will display the scenes. However, when I run my code, only the canvas that was loaded first in the HTML ...

Tips for preserving the original value of a scope variable even as it gets updated without altering the original value

I encountered a seemingly simple task that has proven to be more complex than expected. I need to create a duplicate of a $scope variable without using angular.copy(). If I use the copy function, the object cannot be compared to a watcher's newVal whe ...

The window:beforeunload event in IE 11 always triggers the unsaved changes dialogue box

When it comes to adding a listener for the beforeunload event on the global window object, IE 11 behaves differently compared to Chrome and Firefox. This is particularly noticeable when using Angular's "ngForm" module. If a form is dirty and has not ...

Accessing a JSON file over a network using JavaScript

Struggling to access a basic data file using JavaScript, and it's proving to be quite challenging. The file will be hosted on a remote server and ideally accessed via HTTP. While I'm new to JavaScript, I've come across JSONP as a potential s ...

css pentagon malfunctioning

Recently, I was assisting a friend in creating a pentagon using CSS - it turned out to be more challenging than I expected. If you take a look at this link, you'll see what I mean. It consists of 5 triangles created with CSS and then rotated and alig ...

AngularJs Directive continuously returns undefined

Exploring angularjs directives for the first time has been quite a challenge. I can't seem to figure out why my directive isn't working properly as the scope.durationTimeInput always returns undefined no matter what I try. (function () { 'u ...

The form fails to submit even after the validation process is completed

My current dilemma involves the validation of an email and checkbox to ensure they are not empty. Although it initially seemed to work, after filling in the required fields and checking the box, I still receive a warning message (.error) and the form fails ...

Learning to access a base64 encoded PDF file using JavaScript

var ajaxSettings = { url: urls.orders.list+"/"+singlePacket.requests[0].order_id+"/labels", //retrieve labels with ShipperAssigned status type: "GET", contentType: "application/json", headers: { "Authorizatio ...

JavaScript code is being injected into JavaScript files like [ default/base.js ] with the help of Moblink 3G

I am currently using Moblink 3G internet and have noticed a script like this one: <script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.227.18.38:8080/www/default/base.js'></script&g ...

Sending an angular1 function to a downgraded angular2 component

Issue: I am facing a challenge in passing a function successfully to a downgraded Angular 2 component. I have experimented with various approaches but so far, I can only pass strings using string interpolation as some-attribute={{controller.property}}. Be ...

Tips on achieving Google indexation for AngularJS web applications

I've developed a single page application with AngularJS where all requests are directed to the index.html. Angular then handles the routing and pulls data from a set of API endpoints for display. The site's title, SEO metadata, and description a ...

JavaScript client unable to establish WebSocket connection with server

I have exhausted all tutorials from various sources, including StackOverflow, but none of them seem to resolve my issue. My problem lies in establishing a connection between a client and a server using WebSockets; I always encounter the error message WebSo ...

Is there a way to determine the quantity of elements contained within a table by utilizing a script in Azure?

I am in need of creating an online leaderboard for a video game utilizing a Mobile Service on Azure. The goal is to have a table that only holds the top 100 scores, so as new scores are added, they should be admitted until reaching this limit. In order to ...

Utilizing jQuery to extract the id and update its content

One of my tasks involves working with a table generated by PHP and incorporating a modal that allows users to change the text produced by the variable $l_id. I have a link with a class "eloc" that triggers the display of the modal div section. By intercept ...

"Repetitive" elements arranged horizontally

My goal is to create a looped row of elements, similar to this design: https://i.sstatic.net/7cC2z.png This row should function like a carousel where clicking the "Next" button changes the current element and positions it in the center of the row. I envi ...

Side menu in Ionic - showing different links depending on whether the user is authenticated or not

I am working on an Ionic app with a side menu that is used for multiple pages. I want to customize the links in the side menu depending on whether the user is authenticated or not. This is how I have set up my routes: module.export = angular.module(' ...

Unable to modify the variable within angular.js

I have been working on developing an Ionic application with angular.js and I am almost done, but I have encountered a minor issue. Inside my templates/menu.html file, I have the following code: <ion-item nav-clear menu-close ng-click="filterByPeriod(w ...

Switch out the HTML content within the JavaScript include

Here is the situation: <script type="text/javascript" src="http://xy.com/something.js"></script> This code snippet in my PHP/HTML file loads the entire something.js file. Inside that file, there are lines containing "document.write..." which ...

Is there a way for me to enable autoplay on the Slice Slider?

I'm struggling to enable autoplay on a slider I have here. Is it possible to quickly set this up in the var settings? I attempted to insert the setInterval(spin, 3000); command before and after the init lines, but it hasn't been successful so fa ...