Unable to set default selected option with object model in ng-options [AngularJS 1.5]

Everything is loading correctly with the code below, but the default option is not being selected.

In addition, one of the dropdown items has a value for option.groupJID that matches with

MyCtrl.groupJID = [email protected]</a>

<select id="groups-list2" ng-model="MyCtrl.groupJID" 
 ng-options="option.groupJID as option.profile.name for option in MyCtrl.userGroups track by option.groupJID">
</select>

Please take a look

https://i.sstatic.net/NTKfd.png https://i.sstatic.net/7FmLm.png

Function:

SomeNetworkCall.then(function(success){
   MyCtrl.groupJID = success.peer; //'[email protected]'

   MyCtrl.userGroups = success.groups;

});

success.groups:

[
      {
        "groupJID": "[email protected]",

        "profile": {
          "name": "Flock Desktop Dev - QA issues",
          "description": "QA/Dev Channel"
        }
      },
      {
        "groupJID": "[email protected]",

        "profile": {
          "name": "Some group name",
          "description": "awesome Channel"
        }
      }
      {
        "groupJID": "[email protected]",

        "profile": {
          "name": "Flock Desktop 1",
          "description": "QA/Dev Channel"
        }
      },
      {
        "groupJID": "[email protected]",

        "profile": {
          "name": "Flock Desktop 2",
          "description": "QA/Dev Channel"
        }
      }
]

Answer №1

Quoted from the official documentation

A word of caution when utilizing select as and track by within the same expression.

The value defined in the Select As will serve as the option value, however, if a Track By expression is added, the value being tracked will be that of the Select as value instead of the object itself. In this scenario, where the ngModel value is option.groupJID, and the track by expression resolves to option.groupJID.groupJID resulting in undefined.

To resolve this issue, consider removing the Track by expression

<select id="groups-list2" ng-model="MyCtrl.groupJID" 
    ng-options="option.groupJID as option.profile.name for option in MyCtrl.userGroups">
</select>

Visit the Plunker demo here

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

Waiting for the completion of the ScrollIntoView operation using Selenium

Whenever I try to scroll to a specific element and take a screenshot of the page, the driver captures the screenshot before the page has fully scrolled to the element. To address this, I initially included a time sleep in my code: driver.execute_script(&qu ...

Struggling to implement translation in Angular with Angular Translate

$scope.barChartData.labels.push(moment(currentDate).format("YYYY-MM-DD") + " $filter('translate')('To')" + moment(currentDate).add(4, 'days').format("YYYY-MM-DD")); Currently attempting to translate the word "To" ...

Is the callback function malfunctioning in AngularJS?

I recently started working with AngularJS and I am attempting to update a product using an Angular function. The product is successfully added, and within the success function, I call another function which works fine. However, in the second function, I en ...

Tips for implementing a client-side redirect using Angular's $http module

Here's a code snippet I'm using to redirect after making an $http post request: $http({ method : 'POST', url : '/response', data : querystring.stringify($scope.formData), headers : { 'Content-Type': ...

Running multiple controller functions in nodejs can be achieved by chaining them together in the desired

Currently, I am working on the boilerplate code of mean.io and adding a password reset email feature to it. Whenever a user requests a password reset with their email as a parameter, I generate a unique salt (resetid) and send them an email with a link con ...

Modify hyperlink address according to chosen option

Looking to incorporate a select input in Laravel using the latest alpine.js build. Here's what I have in mind: {{ Form::select('dogs', $dogs) }} This utilizes LaravelCollective HTML for streamlined form creation. Once an option is chosen, ...

Using Javascript to target elements with identical attributes

I have some HTML similar to the code below: <form name="test_form"> <input type="hidden" name="product_id" value="560"> <input type="hidden" name="product_name" value="test product"> <input type="hidden" name="product_type" value="7"& ...

The error message "Uncaught TypeError: Unable to retrieve the 'length' property of an undefined object in Titanium" has occurred

Here is the data I am working with: {"todo":[{"todo":"Khaleeq Raza"},{"todo":"Ateeq Raza"}]} This is my current code snippet: var dataArray = []; var client = new XMLHttpRequest(); client.open("GET", "http://192.168.10.109/read_todo_list.php", true); c ...

Moving information from two modules to the service (Angular 2)

Recently in my Angular2 project, I created two components (users.component and tasks.component) that need to pass data to a service for processing before sending it to the parent component. Code snippet from users.component.ts: Import { Component } fro ...

Ways to verify if two items within a collection of objects share a common value in MongoDB

I have a collection of data called users stored in mongoDB that has the following structure: _id: ObjectId, sports: [ { name: 'cricket', history: [ { from: 10, to: 30 }, { from: 30, to: ...

When attempting to establish a socket connection to a node server from an HTTPS protocol, a mixed

I have recently enhanced my website by adding a nodejs+socket.io based conversation server to it. This server is hosted on a separate AWS instance while the main website runs on HTTPS. However, I encountered an issue when trying to establish a socket conn ...

What are some ways to implement Node.js within Netsuite?

Recently, I've been exploring Netsuite and I'm curious to learn about the feasibility of integrating Node.js or npm modules into a SuiteScript or Suitelet. Is it possible? I have a specific aim in mind - to utilize some npm modules within Netsui ...

I used npm to install a package, but for some reason, it's not appearing in

When attempting to install jquery using npm, I entered the following command: npm install jquery However, upon opening the destination folder, it was empty. (The below text was copied from cmd) > C:\Users\mandar\Desktop\Mady> ...

Can someone assist me with troubleshooting my issue of using a for loop to iterate through an array during a function call

Having recently delved into the world of Javascript, I've encountered a challenging problem that has consumed my entire day. Despite attempting to resolve it on my own, I find myself feeling quite stuck. The structure of my code is relatively simple ...

"Step-by-Step Guide: Integrate Cloudinary Upload Widget with Angular Framework

Struggling with integrating the Cloudinary Upload Widget into my Angular project. I followed the example code provided by Cloudinary, but it's not functioning as expected. It seems like there's a missing import or package needed to access the clo ...

Increase the number of file upload fields available for use

I've implemented this code to enable users to create additional upload fields. The fields are created successfully, and users can select a file. However, the selected file is not added to the input field except for the first one. On inspecting with fi ...

The tab component is failing to load due to an issue with the Bootstrap tab

I've created a page displaying different locations with two tabs - one for Google Maps and another for weather. For example, take a look at this location: The issue I'm facing is that when switching between the tabs, they don't load fully. ...

Error encountered: "OpenQA.Selenium.WebDriverException: 'unknown error: arguments[0].click is not a function" when attempting to click on an SVG element with ChromeDriver in Selenium

I am working on automating the manipulation of an image element "svg" that contains 12 selectable parts (each with a "path" tag). In my electron-angular application, I have been using js actions with Selenium to interact with buttons and other UI componen ...

The brush functionality does not display rotated x-axis labels

I am experiencing issues with my D3 area chart that includes brush functionality on a rotated x-axis at a 45-degree angle. Initially, the x-axis labels are displayed properly but when I apply the brush to the chart, the labels disappear and do not reappe ...

Is there a way for my HTML file to connect with my CSS and JavaScript files stored in an Amazon S3 Bucket?

My current project involves hosting an HTML file as a website on AWS S3 in order to circumvent the CORS Policy. However, when I uploaded all my files into a new bucket, the HTML file was able to open but without accessing the accompanying CSS and JavaScrip ...