The feature in AngularJs where ng-options (key, value) is used with ng-model="selected" is not functioning properly

Question

The feature in AngularJs where ng-options (key, value) is used with ng-model="selected" is not functioning properly

Here is the HTML code I am working with:

<select ng-options="value.name for (key, value) in countries track by key" ng-model="selected" >
</select>

This is the specific object I am trying to manipulate:

$scope.countries = {
    "AFG":{"name":"Afghanistan"},
    "ALB":{"name":"Albania"}
};
$scope.countriesKeys = Object.keys($scope.countries);
$scope.selected = ????;

The main issue I am encountering is figuring out how to get the ng-model selected to function correctly due to the structure of the object being challenging. Unfortunately, I am unable to modify the object.

Ultimately, my goal is to have the <select> default to display "ALB":{"name":"Albania"} as the initial option and then have it update dynamically when different options are selected, changing the $scope.selected accordingly.

javascript angularjs

Answer 1

Answer №1

Here is one possible solution to the problem:

$scope.selected={"country":"Albania"}

Answer 2

Here is one possible solution to the problem:

$scope.selected={"country":"Albania"}

Answer 3

Answer №2

let myApp = angular.module("myApp", []);

//controller
myApp.controller('MainCtrl', function($scope) {
    $scope.countries = {
        "AFG":{"name":"Afghanistan"},
        "ALB":{"name":"Albania"}};
    $scope.countriesKeys=Object.keys($scope.countries);
    $scope.selected="ALB";
  
    $scope.changeSelected = function(newSelected){
       $scope.selected = newSelected;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">

  <div class="div1" ng-controller="MainCtrl">
    {{selected}}
    <select ng-options="key as value.namefor (key, value) in countries" ng-change="changeSelected(selected)" ng-model="selected"></select>
  </div>

</body>

Answer 4

let myApp = angular.module("myApp", []);

//controller
myApp.controller('MainCtrl', function($scope) {
    $scope.countries = {
        "AFG":{"name":"Afghanistan"},
        "ALB":{"name":"Albania"}};
    $scope.countriesKeys=Object.keys($scope.countries);
    $scope.selected="ALB";
  
    $scope.changeSelected = function(newSelected){
       $scope.selected = newSelected;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">

  <div class="div1" ng-controller="MainCtrl">
    {{selected}}
    <select ng-options="key as value.namefor (key, value) in countries" ng-change="changeSelected(selected)" ng-model="selected"></select>
  </div>

</body>

Answer 5

Answer №3

    const findKeyByValue = function( value, array ) {
for( let key in array ) {
    if( array.hasOwnProperty( key ) ) {
         if( array[ key ] === value )
             return key;
    }
}

This new function has been implemented into the controller

findKeyByValue($scope.selected,$scope.countries)

Now I have successfully retrieved both the value and key from the <option> Thank you to everyone who offered their assistance my initial issue stemmed from incorrectly adding "item as value.name..."

Answer 6

    const findKeyByValue = function( value, array ) {
for( let key in array ) {
    if( array.hasOwnProperty( key ) ) {
         if( array[ key ] === value )
             return key;
    }
}

This new function has been implemented into the controller

findKeyByValue($scope.selected,$scope.countries)

Now I have successfully retrieved both the value and key from the <option> Thank you to everyone who offered their assistance my initial issue stemmed from incorrectly adding "item as value.name..."

The feature in AngularJs where ng-options (key, value) is used with ng-model="selected" is not functioning properly

Answer №1

Answer №2

Answer №3

Similar questions

Problem with the render() function in React

Nuxt.js ERROR: Unable to find reference to 'window' object

redux reducer returns an empty array after applying filter to the state

Even with manual installation, the npm package still encounters dependency errors

Tips for effectively handling an angularjs HTTP error with a custom page error in MVC

Javascript: struggling with focus loss

Passing a variable to a modal in AngularJS

Ways to expand the border horizontally using CSS animation from the middle

Error throwing when attempting to use additional plugins in Angular CKEditor

Obtain text content using JQuery and AJAX rather than retrieving the value

How can I add scrolling functionality to the active list item with React?

A guide on integrating a submission button that combines values from multiple dropdown forms and redirects to a specific URL

Applying CSS styles to a page depending on certain conditions

How come my event handler functions stop working when I update the HTML content? (jQuery)

"Utilizing jQuery's getJSON method in a session to fetch data

Showing additional content in an alternative design

Having trouble implementing object type switching in Typescript

Optimal approach for verifying the POST request payload

The library 'material-ui' does not have a 'withStyles' export available

Having trouble compiling for IOS using a bare Expo app? You may encounter an error message that reads "Build input file cannot be found."