Using ng-options to connect an array of objects to an ng-init attribute

Working on creating a select dropdown using ng-options to iterate over an array of objects and linking it to ng-init. However, running into an issue where the correct variable needs to be passed through ng-change as well.

The current code is set up in a way that ng-init functions properly and selects the right option when the page loads. But, when options are chosen, it fails to pass the id to the ng-change.

<select name="baddress" ng-init="autoship.baddress_id = address.id || addresses[0]" 
ng-model="autoship.baddress_id" 
ng-change="setter('baddress', autoship, address.id)" 
ng-options="address as address.address + ' ' + address.address2 + ' ' + address.city + ', ' + address.state + ' ' + address.zipcode for address in addresses" ></select>

Adding .id to address in the beginning of the ng-options resolves the issue with ng-change, but it results in the select dropdown being empty upon loading.

<select name="baddress" 
ng-init="autoship.baddress_id = address.id || addresses[0]" 
ng-model="autoship.baddress_id" 
ng-change="setter('baddress', autoship, address.id)" 
ng-options="address.id as address.address + ' ' + address.address2 + ' ' + address.city + ', ' + address.state + ' ' + address.zipcode for address in addresses" ></select>

Answer №1

When looking at this line of code, it is important to note that adresses[0] refers to the entire address object:

ng-init="autoship.baddress_id = address.id || addresses[0]" 

To only extract the id, it is recommended to modify it to:

ng-init="autoship.baddress_id = address.id || addresses[0].id" 

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

How do I transform the date "Tue Nov 26 2019 16:00:00 GMT-0800" into the .NET JSON date format "/Date(1574812800000)/"?

I am looking to convert a date from ISO format to .NET JSON date format using JavaScript. For example, I want to change "Tue Nov 26 2019 16:00:00 GMT-0800" to "/Date(1574812800000)/". ...

Even after unsubscribing with mqtt.js, the old listener continues to receive messages

Currently, I am utilizing mqtt.js to receive websocket data from an MQTT server. The subscription process is functioning properly, but the challenge lies in changing the topic dynamically by modifying the websocket configuration. The issue arises when, eve ...

What is the maximum number of rows that Handsontable can handle at once?

Issue encountered in queued task: Security check failed - Too many TRs. Please specify table height to enable scrollbars. at WalkontableTable._doDraw (client/libs/handsontable-0.10.5/jquery.handsontable.full.js?37b46fd989b9a974c3501865b51effd7adec37e4:1285 ...

Learn the process of adjusting opacity for a specific color in CSS

At the moment, this is the code I'm using to apply a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I am interested in finding out if there is a way to add opacity based o ...

Change classes of sibling elements using Angular 2

Imagine you have the following code snippet: <div id="parent"> <div class="child"> <div class="child"> <div class="child"> </div> I am looking to automatically assign the class active to the first child element. ...

Angular 2 Encounter Error When Trying to Access Undefined Property in a Function

Element: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-ore-table', templateUrl: './ore-table.component.html', styleUrls: [&a ...

Assigning a value to a variable using conditional IF statements and the Alert function in JavaScript

How can I set a variable value based on conditions and display an Alert in JavaScript? Hello, I have a code that utilizes Alerts to display the results of evaluating the visibility status of two controls using jQuery. If pnlResultados is visible, it will ...

When trying to assign the result of res.send() to another variable in NodeJS Express, it does

My current Express version is 3.4.4 and I encountered an issue when trying to implement the following code: var cb = res.send; cb(result); This resulted in an error message: ...\node_modules\express\lib\response.js:84 var HEAD ...

Intellisense feature for Protractor in Visual Studio 2013

As a newcomer to the world of node.js, angular.js, protractor.js and jasmine.js, I must admit that I am not well-versed in web development. However, I am currently working on creating some protractor tests for an Angular app and so far, things are going sm ...

Updating .babelrc to include the paths of JavaScript files for transpilation

Using Babel, I successfully transpiled ES6 JavaScript to ES5 for the project found at I'm currently stuck on updating my .babelrc file in order to automatically transpile a specific ES6 file to a particular ES5 file. Can someone guide me on what cod ...

What is the best way to execute tests in different environments with Protractor?

Is it possible to execute specifications in various environments? Maybe by adjusting the protractor-config file? Could we do something along the lines of specs: ['../tests/*.js', server1], ['../more_tests/*.js', server2] within the ...

How can I showcase the selected file using jQuery's querySelector?

I have successfully implemented a file upload feature using jQuery querySelector. Now, I am looking for a way to display the selected file name in a span element after the user selects the file. Here is my HTML code: <span id="filename"></span&g ...

What is the best way to ensure that a mapped type preserves its data types when accessing a variable?

I am currently working on preserving the types of an object that has string keys and values that can fall into two possible types. Consider this simple example: type Option1 = number type Option2 = string interface Options { readonly [key: string]: Op ...

ReactJS not responding to Bootstrap toggler button

My Bootstrap toggler button is not working in ReactJS. I did not include the jQuery scripts because I imported Bootstrap at the top. The button should only appear and function on small devices. import React from 'react'; import 'bootstrap/d ...

Can you modify a attribute value in one HTML file from another?

I currently have a website and I am looking to modify the aria-expanded value of an expandable paragraph on another page when I click on an anchor element in the main page. What changes do I need to make in my main.html file in order to update the aria-exp ...

Running a Node JS application concurrently with an Express API connected to MongoDB

Here's my current project plan: I've created a small Node app that fetches data about the stock market from an API and then stores the data in a Mongo DB (which is already up and running). My next step is to create an API that will allow other se ...

Calculating distinct values within a single key in an object

My goal is to track the occurrences of four specific string values within the same key. The issue lies in my struggle with adding multiple counters. While the first counter successfully tracks the initial condition, subsequent conditions within the if/els ...

Should FormBuilder be utilized in the constructor or is it considered a poor practice?

section, you can find an example of implementation where declarations for formBuilder and services are done within the constructor(). While it is commonly known that using services inside the constructor() is not a recommended practice and should be done ...

A guide on how to reset Orbit Controls once the target has been defined

After clicking the mouse, I successfully set a new target for my THREE.OrbitControls and it works perfectly. However, once the camera pans to the new location, I lose all mouse interaction. I suspect that I may have broken the controls when I made the came ...

Developing an identical design and layout but utilizing a distinct domain name for the company

After being given the task of creating a website identical to an existing one with a different domain name on WordPress, I proposed using the parent HTML source code or cloning it to speed up the project. The client agreed, explaining that starting from sc ...