angularjs highlight the first item in select

Question

After the initial call to get the list of items (see below), I need get select the first item and get more details from my database. So after the items load into my select input I need to :

Highlight the first item in listbox
Pass that first itemID to DB to fetch the details of that item.

How can I do all of this within my initial page load?

<!DOCTYPE html>
<html>
<head>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script>
        var IM_Mod_app = angular.module('IM_ng_app', []);
        IM_Mod_app.controller("IM_Ctrl", function ($scope, $http) {
            var PlaId = "DFC";

            $http({
                method: 'GET',
                url: 'http://xxx/api/ItemMaintenance/GetAllFilteredItems',
                params: { PlaId: PlaId }
            }).then(function successCallback(response) {
                $scope.items = response.data;
            }, function errorCallback(response) {            });
        });
    </script>  
</head>

<body ng-app="IM_ng_app">
    <table ng-controller="IM_Ctrl">
        <tr>
            <td>
                @*<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items" ng-class="{selected: $index==0}" ng-change="onItemSelected(itm.ITEM_ID)">*@
                @*<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items track by itm.ITEM_ID" ng-selected="$first" >*@
                <select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items track by itm.ITEM_ID"  ng-init="items[0].ITEM_ID">
                <option value="" ng-if="false"></option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

What do you mean by highlight the first item? Do you mean select the first item after you get the list back from your first http call? — ryanyuyu, Mar 15 '19 at 12:37
When the listbox loaded by default the first item need to be highlighted and want to display the details of that item by passing it to DB, and every thing need to be done when the page loaded. — user11130182, Mar 15 '19 at 12:45

score 0 · Answer 1 · answered Mar 15 '19 at 12:46

0

Try initialising $scope.itm

Let's say I have

 <select ng-model="whatever">
       <option value="hello">bye</option>
       <option value="hello2">..</option>
 </select>

If you initialise $scope.whatever = "hello" bye will be displayed in the select

answered Mar 15 '19 at 12:46

dawsnap

994
9
21

tried using ng-init="items[0].ITEM_ID" but it didn't work for me. – user11130182 Mar 15 '19 at 12:54
try writing $scope.itm = "what you want to display"; inside – dawsnap Mar 15 '19 at 13:08

score 0 · Accepted Answer · answered Mar 15 '19 at 12:57

Your ng-init isn't working as you expect because your array does not have any data when the page loads. Instead, it has to complete the $http call before any of the data is available. This just means that you need to finish your work when your $http call comes back, (in the .then).

Your updated AJAX call might look like this

        $http({
            method: 'GET',
            url: 'http://xxx/api/ItemMaintenance/GetAllFilteredItems',
            params: { PlaId: PlaId }
        }).then(function successCallback(response) {
            $scope.items = response.data;

            //Initial the select box
            $scope.itm = $scope.items[0];

            //Get the details 
            getSelectedItemDetails();
        }, function errorCallback(response) {            });

        function getSelectedItemDetails() {
            $http({}) //whatever API endpoint to get the details
                .then(function (response) {
                    // do something with the data.  Maybe extend $scope.itm?
                })
        }

Moving forward, I discourage using ng-init. Instead, just initialize the value of your variables in your javascript. Because of angular's two-way binding, any updates to the value from the javascript will make it to the HTML.

angularjs highlight the first item in select

2 Answers2