AngularJS select box setting selected valueIt can be accomplished by manipulating the

Question

AngularJS select box setting selected valueIt can be accomplished by manipulating the

I am facing an issue with a selectbox populated with options from the backend.

<tr>
    <td class="col-lg-4">Superkund</td>
    <td><select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item.namn for item in superkundOptions" ng-change="onChangeSuperCustomer(selectedSupercustomer)"></select></td>
</tr>

 $http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) {
            $scope.superkundOptions = data;
        });

The challenge I'm facing is that the first row remains empty and I want to replace it with a selected value. I attempted to do so with:

$scope.selectedSupercustomer = "fish"

However, this approach did not yield the desired result. Can anyone offer assistance?

javascript angularjs

Answer 1

Answer №1

When using the select box, it is important to remember that it works with references. This means that you need to assign the model $scope.selectedSupercustomer to $scope.superkundOptions[ID/INDEX_OF_"fish"].

Answer 2

When using the select box, it is important to remember that it works with references. This means that you need to assign the model $scope.selectedSupercustomer to $scope.superkundOptions[ID/INDEX_OF_"fish"].

Answer 3

Answer №2

One way to accomplish this is by using the ng-init directive. Here's an example showing how you can use ng-init to select the first item:

<select ng-init="selectedSupercustomer = superkundOptions[0]" ... ></select>

Check out this JSFiddle Example

Answer 4

One way to accomplish this is by using the ng-init directive. Here's an example showing how you can use ng-init to select the first item:

<select ng-init="selectedSupercustomer = superkundOptions[0]" ... ></select>

Check out this JSFiddle Example

Answer 5

Answer №3

If you're interested, here's an example to explore:

HTML:

<div ng-app="myApp" ng-controller="SomeController">
    <div ng-repeat="Person in People">
        <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
        <div class="listitem" ng-repeat="Choice in Person.Choices">
            {{Choice.Name}}: 
            <select 
                ng-model="Choice.SelectedOption"                 
                ng-options="choice.Name for choice in Choice.Options track by choice.ID"></select>
            {{Choice.SelectedOption.ID}}
        </div>
    </div>
</div>

JavaScript:

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
    $scope.People = [{
        "firstName": "John",
        "lastName": "Doe",
        "Choices": [
            {
                "Name":"Dinner",
                "Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
                "SelectedOption":{Name:"Chicken",ID:2}
            },
            {
                "Name":"Lunch",
                "Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
                "SelectedOption":""
            }
        ],        
    }, {
        "firstName": "Jane",
        "lastName": "Doe"
    }];
});

CSS:

body{
    font-family: verdana;
    font-size: 10pt;
}

.listheader{
    font-weight: bold;
    text-decoration: underline;
    padding-top: 5px;
}

Here is the link to the code on jsfiddle

Answer 6

If you're interested, here's an example to explore:

HTML:

<div ng-app="myApp" ng-controller="SomeController">
    <div ng-repeat="Person in People">
        <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
        <div class="listitem" ng-repeat="Choice in Person.Choices">
            {{Choice.Name}}: 
            <select 
                ng-model="Choice.SelectedOption"                 
                ng-options="choice.Name for choice in Choice.Options track by choice.ID"></select>
            {{Choice.SelectedOption.ID}}
        </div>
    </div>
</div>

JavaScript:

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
    $scope.People = [{
        "firstName": "John",
        "lastName": "Doe",
        "Choices": [
            {
                "Name":"Dinner",
                "Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
                "SelectedOption":{Name:"Chicken",ID:2}
            },
            {
                "Name":"Lunch",
                "Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
                "SelectedOption":""
            }
        ],        
    }, {
        "firstName": "Jane",
        "lastName": "Doe"
    }];
});

CSS:

body{
    font-family: verdana;
    font-size: 10pt;
}

.listheader{
    font-weight: bold;
    text-decoration: underline;
    padding-top: 5px;
}

Here is the link to the code on jsfiddle

AngularJS select box setting selected valueIt can be accomplished by manipulating the

Answer №1

Answer №2

Answer №3

Similar questions

The xslt code is failing to invoke the JavaScript function

What is the most effective method in Vue.js for transitioning elements without the need to use v-for and v-if at the

Steps to extract viewmodel information from a specific controller following an ajax request

leveraging a callback function alongside the useState hook

Error message: A boolean type cannot be used as a function in the fullcalendar ajax call

Implementing complex routing with Express.js on top of Node.js

Unable to retrieve private field using a public getter method through a proxy

"Enhance Your Website with Dynamic Text Effects using JavaScript

Sorting Columns in PrimeVue DataTable by Date and Time

What is the best way to send information using an array of objects?

Tips for converting a QR code to data URL encoding to include in a JSON response

Can a custom spellchecking feature be integrated into an HTML textarea?

Aframe Descend Rotation

Developing uniform resource locators with jQuery

The initial row of data does not appear to be exported in the CSV file when using the ng-table-export feature in AngularJS

Utilizing the datepicker options function within a different function

Does the positive Z axis move inward in threejs? The behavior of camera.near and camera.far seems strange

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

Why is it necessary to include 'export' when declaring a React component?

Issue with a variable within an *.ejs file