Issue with ng-selected not functioning properly

I am facing an issue where the ng-selected is assigned as true but the option is not being selected.

The following is my controller code:

.controller("PendingInvoiceCtrl", function($scope, $location, safeApply, dataService) {
    var userData = dataService.data();
    var mauth_token = userData.mauthToken;
    var mauth_acntId = userData.thisApartment.account;
    var apt_id = userData.thisApartment.id;

    $scope.house_list = userData.thisApartment.house;
    $scope.selectedHouseId = $location.search().houseId;

    console.log($scope.selectedHouseId);
});

Here is my HTML code:

<select ng-model="selectedHouseId">
      <option ng-repeat="house in house_list" ng-selected="{{ house.house_id == selectedHouseId }}" value="{{ house.house_id }}">
           {{ house.house_display_name }}
      </option>
 </select>

And this is how my data is formatted:

{
      house:[0]:{
           house_display_name: "paras, 101",
           house_id: "520755"
      }
}

Answer №1

The ng- directives do not require additional curly braces. Try this instead:

<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">
    {{house.house_display_name}}
</option>

A more efficient approach would be to utilize the ng-options feature of the select tag. This would look like:

<select
    ng-model="selectedHouseId"
    ng-options="house.house_id as house.house_display_name for house in house_list">
</select>

This way, you won't need to manually handle the selected attribute for the options, as it will automatically select one based on the model's value.

Answer №2

Make sure to use the following code for your option tag:

<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">

Answer №3

The interaction between ng-Selected and ng-Model has always been a bit ambiguous. It seems that at some stage, ng-Model started to take precedence over ng-Selected.

Answer №4

I suggest utilizing the Angular Directive ng-options for better functionality.

<select ng-options="building.building_id as building.building_name for building in building_list" ng-model="selectedBuildingId"></select>

Check out this related plunker: http://plnkr.co/8LGz5o0d2gDRoRHYr4pQ

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

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

What is the best way to output multiple Div elements using Jquery or Javascript?

I have the following HTML code snippet: <div id="box"> <div id="id_1></div> <div id="id_2></div> <div id="id_3></div> <div id="id_4></div> </div> Can someone guide me on how to use Jquery or ...

How can I create space between a checkbox and its label in Google Web Toolkit (GWT)?

How can I create space between a Checkbox and its content in GWT? Checkbox c = new Checkbox("checkme"); c.setStyleName("checkbox_style"); When I try using padding or margin, the entire checkbox and its content move together. Is there a way to achieve a g ...

Postpone the processing of a message in the Service Bus Queue until a specific time using NodeJS

Despite trying multiple tutorials, I have been unable to achieve the desired result so far. Currently, my setup involves a nodejs app that sends messages to the Service Bus Queue and another nodejs app that continuously polls it. The goal is to schedule a ...

typescript push in react native is a crucial step to enhance performance and optimize

I've been diving into TypeScript within the realm of React Native. Oddly, when I translated a certain snippet to vanilla JavaScript, the application worked flawlessly. However, upon converting it back to TypeScript, an error message popped up stating ...

Revise the line graph

Currently, I am utilizing dimple js and have a line chart code. However, there seems to be an issue with the event I set up - whenever a button is clicked, the chart should redraw using chart.draw(), but this function doesn't seem to work. Any insight ...

The issue with json arises when utilizing $.ajax without the definition$

Attempting to make this code work properly Javascript $.ajax({ url: '/endpoint/json/', //Update the path to your JSON file. type: "post", dataType: "json", //Remove the "data" attribute if not needed. data: { ...

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

I initially found a solution on this StackOverflow thread However, I wanted to add my own helper function that generates a fresh Axios instance with the user's authentication token. Here is what I came up with: import axios from "axios"; c ...

Place the div directly beside the input field on the right side

I am attempting to align a div directly beside the text being entered in a text input field. It seems logical to me that this could be achieved by measuring the length of the input value and positioning the div accordingly. However, the issue I am facing i ...

Angular: What is the best way to populate a column in a table with individual dropdown menus in each cell, each containing unique values?

I am completely new to Angular and I am attempting to build a table to display user information. <div ng-controller="ContactController as cc" ng-app="MyApp" id="account-settings-page"> <div class="slds manage-account-table"> <table class="s ...

Failure of Ajax POST requests to refresh screen content

Within my "scenario", I have numerous "forms" that consist of various "events," "data," and more. To populate all this information, I've included the following script to run once the page has fully loaded: $(document).ready(function() { var scenarioI ...

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

Is there a way to stop the YAML parser from including question marks in its output?

Looking to create a basic docker compose setup and integrate it into an existing file. The yaml parser found here seems promising, but I'm struggling with the question mark that appears in its output. This is the content of my current docker compose ...

JavaScript for loop similar to Python'sIn JavaScript, the

As someone who is new to programming, I primarily use Python but have now encountered a situation where I need to work with JavaScript for a project utilizing Phonegap. The query retrieved from the server looks like this: [["CompanyName", "lat", "long", ...

Difficulty with parsing JSON in JavaScript and retrieving values by key

I'm encountering an error response within the ajax error function; $.ajax(Request).error(function (Response) { var content = JSON.stringify(Response.responseText); var obj = JSON.parse(content); console.log("Response.r ...

In three.js, a full rotation on the Y axis is not achievable for cubes

My low poly world features gravity added with raycasting to the character. Now, I am looking to incorporate another raycaster in front of the character, specifically the pointer lock controls, to enable walking on non-flat surfaces. This raycaster would al ...

Error: The function `res.status` is unsupported

I've been working on a function to allow uploading images to imgur through my express API (nodejs), but I'm running into an issue when calling a function that returns a promise: TypeError: res.status is not a function at uploadpicture.then T ...

What is the best way to refresh a jQuery slideshow using a jQuery show/hide event?

I am currently using jQuery to toggle the visibility of div elements on a webpage. Each div contains a jQuery slideshow. The first one functions correctly, but when navigating to the next div, the slideshow breaks (view here: ). I have been advised that I ...

Issue with dropdown component in material ui version v1.0 beta 26 encountered

Currently, I am encountering an issue with the dropdown component while using Material UI v1.0 beta.26. In this updated version, you are required to utilize the Select component along with MenuItem. Although my dropdown is successfully populated upon rend ...