Setting a default value in a dynamic dropdown using AngularJS

Question

Setting a default value in a dynamic dropdown using AngularJS

I could really use some assistance with my issue as I am fairly new to working with AngularJS. My dilemma is related to setting the default value in a select option when there is only one item available due to it being a dynamic select option. Though there is another dropdown with multiple items which works fine, the challenge lies in selecting the default value when there's just one item in the select option using ng-options.

                    <select  class="form-control form"  ng-model="relatedTo" style="height: 40px;" ng-options="c.CUSTCODE as c.CUSTNAME + ' - ' + c.CUSTCODE for c in customers | filter:code" >  </select><span style="color:red" ng-show="type === 9 || type !== 9"></span>

ANGULARJS

                    $http.post('commandCenter.aspx/allCustomer', {}).then(
                        function onSuccess(response) {
                            $scope.customers = JSON.parse(response.data.d);
                            console.log($scope.customers); },
                        function onError(response) {
                            console.log('error !!! ');
                        });

Picture no.1 It's okay in this picture because he has a lot of list of items.

Picture no.2 When there is only one item, it must be default or selected. https://i.sstatic.net/n1hTC.png https://i.sstatic.net/rXMqx.png

javascript angularjs

Answer 1

Answer №1

As suggested by @MrJami, the code would look something like this:

                $http.post('commandCenter.aspx/allCustomer', {}).then(
                    function successCallback(response) {
                        $scope.customers = JSON.parse(response.data.d);
                        if ($scope.customers.length === 1) {
                          $scope.relatedTo = $scope.customers[0].CUSTCODE;
                        }
                        console.log($scope.customers); },
                    function errorCallback(response) {
                        console.log('Error occurred!');
                    });

Answer 2

As suggested by @MrJami, the code would look something like this:

                $http.post('commandCenter.aspx/allCustomer', {}).then(
                    function successCallback(response) {
                        $scope.customers = JSON.parse(response.data.d);
                        if ($scope.customers.length === 1) {
                          $scope.relatedTo = $scope.customers[0].CUSTCODE;
                        }
                        console.log($scope.customers); },
                    function errorCallback(response) {
                        console.log('Error occurred!');
                    });

Setting a default value in a dynamic dropdown using AngularJS

Answer №1

Similar questions

When using the executeScript() method, it unexpectedly gives a null result instead of allowing me to scroll

Utilizing Async and await for transferring data between components

Insert the META tag data specific to Facebook Instant Articles directly within the JavaScript code

Every time I try to launch NPM start, an error pops up on my screen

encountering a type mismatch error while trying to retrieve data from an array

Using CSS to design a table-like structure with rows that span multiple columns

Troubleshoot AngularJS in Visual Studio (but not in Visual Studio Code)

Show the cell data when the checkbox next to it is selected

Encountering obstacles with asynchronous requests while attempting to retrieve an Excel file using ajax

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Alter the td styling depending on the value using AngularJS

Developing an interactive form for instant price calculations

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

Dealing with a surprise JSON error in Express.js using Javascript

Guidelines for incorporating a router into the title of a Vuetify.js toolbar

Interactive table created with DataTables that automatically updates the dynamic JSON data source whenever changes are made to the table

Determining the Nearest Form to an Element using jQuery

Leveraging JSON in conjunction with AJAX and Python database operations

How can I position an object in Three.js to perfectly align with the left half of the screen, adjusting both its width

Selecting images using jQuery