Utilizing sub-object attributes as ng-model in AngularJS

I'm working with a dropdown that is connected to a user object structured like this:

{
  userId:1,
  userLogin:"test",
  locale: { localeCode:"en-US" }
}

This structure originates from a C# model class where User and Locale are associated classes (User has one Locale).

My goal is to set up the dropdown without resorting to custom logic such as special serialization methods or adding $watch to a "UI" attribute in order to update locale.localeCode in the background.

<select id="dropLocale" required="required" addempty="true" 
        ng-model="user.locale.localeCode" 
        ng-options="i.localeCode as i.localeCode for i in localeList"></select>

Any assistance on this matter would be greatly appreciated. Thank you!

c#javascriptangularjs

Answer №1

If the data structure appears as follows

$scope.localeList = [{
    userId: 1,
    userLogin: "example",
    locale: {
        localeCode: "fr-FR"
    }
}, {
    userId: 2,
    userLogin: "sample",
    locale: {
        localeCode: "es"
    }
}];

It seems like you overlooked the locale level, please consider this correction

ng-options="i.locale.localeCode as i.locale.localeCode for i in localeList"

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

Increase the number of <li> tags by one for each initial letter in the value of every item

For the purpose of utilizing this incredible plugin: Jquery iphone contacts I have to enhance my current markup (regular list): <div id="iphone-scrollcontainer"> <ul id="iphone-search"> <li><a href="#A" title="A">A</a ...

phpjavascriptjquery-pluginsalphabetical

Struggling with making the URL regex function properly

I have encountered an issue with my current regex pattern for identifying URLs in text. It seems to be missing some URLs, such as: youtube.be/8P0BxJO youtube.com/watch?v=VrmlFL It is also not capturing all bit.ly links. Match m = Regex.Match(nc[i].Inne ...

c#.netregex

AngularJS score tracker malfunctioning

Can you please review this for me? http://plnkr.co/edit/i4B0Q2ZGiuMlogvwujpg?p=preview <input type="radio" name="op_0" ng-value="true" ng-model="n1"> True <input type="radio" name="op_0" ng-value="false" ng-model="n2"> False <input type="r ...

javascriptangularjscounter

What could be preventing this AJAX call from running correctly?

I am in the process of developing a website that provides users with a discount based on a promotional code they can input. It is important for me to verify the validity of the code in our database before allowing a new sign-up to proceed. Below is the AJA ...

javascriptphpajaxpost

Passing the IDs of other elements as arguments when invoking a JavaScript function

Greetings, as I work on a jQuery mobile app, a particular scenario has arisen that requires attention. <script> function showPanel(info) { alert(info.id); } </script> <div data-role=" ...

javascriptjqueryjquery-mobileelement

Having trouble getting the popover window to appear in Bootstrap when utilizing the modal class?

I attempted to create a responsive image gallery using the bootstrap framework. Each image has its own modal class, but when I click on an image, no popup window appears, only a dark screen is displayed. I have checked this in the Bootstrap documentation ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

javascriptjqueryhtmlcssattr

The method e.close cannot be called within the useEffect hook

Below is the code snippet that I'm currently working with: useEffect(() => { const redirectedFromRegister = sessionStorage.getItem("redirectedFlag") === "yes"; if (!redirectedFromRegister) redirect("/") ...

javascriptreactjsnext.jsreact-hooks

Guide on implementing Regular Expressions in Directives for validation in Angular 8

Managing 8 different angular applications poses its unique challenges. In one of the applications, there is a directive specifically designed for validating YouTube and Vimeo URLs using regular expressions. Unfortunately, once the RegExp is declared, ther ...

javascriptangulartypescriptangular-directive

Leveraging route configuration's scope in HTML

As a beginner in AngularJs, I am currently exploring the creation of a single page application. However, I am encountering difficulties in converting my initial code into more professional and efficient code. During this conversion process, I have separate ...

javascripthtmlangularjs

Retrieve the title or URL from an element without clicking by using selenium

I've been attempting to extract the name or href from a link text, but I haven't had any success. Although I can click on the link, I am unable to retrieve the name or href as a string; var linkElems = driver.FindElements(By.ClassName(" sortin ...

c#selenium

Guide to verifying the visibility of a disabled element using Selenium and C#

I am currently verifying the visibility of an element. I encountered a situation where my assertion was returning false, and upon further investigation, I discovered that the element is disabled. I would like to verify if the element is visible regardles ...

c#seleniumselenium-webdriverspecflow

Is there a way to determine if a watcher function executed right away in Vue 3?

When working with vue3, if I encounter a situation like this watch(loading, (new_val, old_val) => { // How can I determine whether this function was triggered immediately or after the initial run? }, {immediate:true}); Is there a way to achieve som ...

javascriptvue.jsvuejs3watch

Here is an example of how to transfer a value from PHP to a jQuery function in the code snippet provided

This is an example of my code. It is functioning properly even without passing a value. function displayMessage(text) { alert(text); } <button type="button" id="button" class="btn btn-success" onclick="displayMessage("Hello");"> Click Me </ ...

javascriptphpjqueryajaxhtml

Establish a timeout period for ajax requests using jQuery

$.ajax({ url: "test.html", error: function(){ //do something }, success: function(){ //do something } }); At times, the success function performs well, but sometimes it does not. How can I add a timeout to this ajax re ...

javascriptjqueryhtmlcssajax

Tips on finding the most budget-friendly item in a Vue array

I'm working with an array called item.warehouse_positions that contains various prices and IDs. I want to display only one item.id with the lowest price. How can I achieve this? <div v-for='(item, index) in item.warehouse_positions' :key= ...

javascriptvue.jsvuejs2

Accessing variables in subfunctions proves challenging for Node.js

Here is a function I've been working on to calculate the total price for a checkout process. However, when I console.log() the variable before it is returned, I get 0. But if I log the variable inside the findOne() function, I get the correct value. ...

javascriptnode.js

Using JavaScript to skip duplicate rows in an HTML table based on group

My current task involves fetching multiple data from a database using AJAX and PHP. Once I retrieve the data successfully, I need to group the results in a specific format like the images shown below, including having a textarea field for each group. Here ...

javascriptajaxgrouping

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

javascriptjquerycss

Incorporate an icon into a text input field using Material UI and React

I have a form with a text input element: <FormControl className='searchOrder'> <input className='form-control' type='text' placeholder='Search order' aria-label='Search&ap ...

javascripthtmlcssreactjsmaterial-ui