What is the process for accessing ng-model data when default selection options have been utilized?

I have a piece of code that I used to bind my cost center information and set the default value.

Controller: In my controller, I have some logic to populate a list called costCenterList. It contains the following data:

$scope.costCenterList=[{ "costCenter": 111 }, { "costCenter": 112 }, { "costCenter": 113 }, { "costCenter": 114 }];

$scope.selected = $scope.costCenterList[0];

HTML:

<label class="item item-input">
    <div class="input-label">Cost-center</div>
    <select placeholder="Cost Center" ng-options="item.costCenter for item in costCenterList track by item.costCenter" ng-model="selected">
    </select>
</label>

When trying to access the selected data in my controller using:

console.log("Selected costCenter:" + $scope.selected.costCenter);

Output:

Selected costCenter: 111

The output shows the default data that was initially presented in the form, not the data that I actually selected through the form. Any suggestions on how to address this issue?

Answer №1

Did you attempt this task? Expense category

Using a controller: $scope.expenseCategoryList=[{ "category": "Food" }, { "category": "Travel" }, { "category": "Office Supplies" }, { "category": "Utilities" }]; $scope.selected = $scope.expenseCategoryList[0];

Answer №2

It appears that this is what you are looking for:

ng-options="item as item.costCenter for item in costCenterList"

Check out this jsfiddle link:

https://jsfiddle.net/mckinleymedia/v8bb4wep/5/

I have added a button to the fiddle so you can easily view the value.

<select placeholder="Cost Center" ng-options="item as item.costCenter for item in costCenterList" ng-model="selected" ng-init="selected=costCenterList[0]">

You can see the updated version of the jsfiddle here:

https://jsfiddle.net/mckinleymedia/v8bb4wep/6/

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

What is the process for removing the body of a table?

My goal is to reset the table body, which has been filled with JavaScript loaded data previously. https://i.stack.imgur.com/7774K.png ` getTableData = function (clicked_id) { if (clicked_id != '') { $.ajax({ async : f ...

Is there a problem with the way I created and assigned my interface?

As a beginner in building a web app using the React Library and next.js with TypeScript, I am currently working on creating a todo list web application. I have defined an interface to collect the list data as shown below: interface listData { text: stri ...

dimming of dojo dijit.Dialog

I've been encountering issues with "undimming" a Dojo Dijit dialog. Even though I am using the appropriate calls, there are instances where parts of the page remain dimmed. I can still scroll through the windows and access the undimmed sections. Is th ...

jQuery animation for expanding accordion headers

I want to create a cool animation for my accordion headers that mimics a ribbon being dragged onto the wrapper when hovered over, and then dragged out when the hover ends. Everything was working fine in this initial jsFiddle, but as soon as I tried to ani ...

Why am I unable to locate my personalized module?

I've encountered an issue with my npm module not being found in my sample script after publishing it. Here is the link to my module: https://www.npmjs.com/package/kong-hmac https://github.com/y-zono/kong-hmac-js Here's what I have tried: $ m ...

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear. <mat-drawer-container class="example-container" ...

Is it time to set up your own MySQL Database?

let connection = mysql.createConnection({ user: 'root', password: '1234', database: 'data101', port: 3306 }); While using the MySQL package for NodeJS to create a database, I have a question. Do I need to manually cr ...

When the textbox is clicked, the selectRow checkbox function will be disabled

Can someone provide me with some assistance? I am facing an issue with a table row that contains a checkbox, textbox, and some numbers. When I click on the row, the checkbox gets checked and clicking it again will make the checkbox get unchecked. However, ...

Issue with onclick event not being triggered by Javascript function inside constructor

My current challenge involves implementing a function called makeHighlight within the SmartButton constructor. The purpose of this function is to execute whenever I click on the SmartButton object, which is represented by an image element. To achieve thi ...

Endless loop JSON vulnerability

I recently came across a discussion on Stack Overflow about Google's practice of prepending while(1); to their JSON responses. Can anyone provide guidance on what type of PHP script would be suitable for this situation? I attempted the following: $ ...

Redirecting to the next page once the Bootstrap validator has successfully processed

I am currently utilizing CodeIgniter framework for my project. In the view file, I have a form where I implemented Bootstrap validator for field validation. The Bootstrap validator is successfully validating the form fields. However, the issue arises when ...

Changing marker colors dynamically in Google Maps with NextJS

I'm using the @googlemaps/js-api-loader package to load a map in my nextJS app. I have a list of locations that I want to plot on the map, and I also want these locations disabled on the left side of the page. When hovering over one of the locations ...

Is it possible to use a pass-through or helper function to invoke Asynchronous Generators in Node.js?

Exploring New Territory Upon my discovery that the asynchronous generator pattern is relatively novel in JavaScript and currently only supported in Node.js starting from version 10, I delved deeper into its functionalities. Now, equipped with this knowled ...

angularjs function available for use across the entire application

After gaining some experience with AngularJS, I frequently ponder how to make global functions (used in multiple controllers) accessible throughout the entire app. My dilemma lies in the fact that $scope is only accessible within its controller. One solu ...

What is the best way to distinguish between partially filled or invalid datetime-local input and completely empty input?

How can we differentiate between the user entering an invalid date and/or time in a datetime-local type of <input> versus not entering anything at all? I want to consider no input as a signal that the user wants to reset/remove the datetime currentl ...

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

Tips for dynamically populating nested collections in Firestore continuously

I'm currently working on a React/Redux application that utilizes Firebase Auth/Firestore to manage a user's gym workout routines. To handle data submission, I am using Redux Form alongside the following data structure I aim to achieve in Firestor ...

Tips on creating a subsequent post for a file that has been uploaded to a Node Express server and then forwarded to a different API

We are currently working with an Express server in Node, where we upload a file on one route and then need to send this file to another endpoint for processing. However, the file is not stored locally on the server; it exists as an uploaded object. I&apos ...

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...

J Carousel Bullet Navigation Controls

I need help troubleshooting the bullet function on my JCarousel. While all banners are visible in the back-end, the bullets seem to be inactive and I cannot navigate through them. Can someone provide guidance on how to fix the function code so that I can ...