default data not coming in dropdown using angular JS

Question

I am trying to load data to select box in angular JS. Data are getting loaded but the default value is coming as empty as shown below. Can any one please help.

<option label="CURRENT" value="object:4">CURRENT</option><option label="description of Version 2" value="object:5">description of Version 2</option><option label="description of Version 3" value="object:6">description of Version 3</option><option label="description of Version 4" value="object:7">description of Version 4</option></select>

Please find my code below :

app.jsp

<!DOCTYPE html>
<html lang="en">

    <body class="internal" >
        <div id="contentContainer" class="stratum" data-ng-controller="appController">
                <div id="businessDropDownDiv" class="column column.one-quarter-">
                                <div class="selectLabel">
                                        <label for="businessSelect">Business Area</label>
                                </div>
                                <div>   
                                    <!-- <select ng-init="item.versionID=versions[0]"  ng-model="item.versionID" ng-selected="0" ng-options="version.name for version in versions" required> -->                                
                                    <select data-ng-init="business.data.businessId=business[0]" data-ng-model="business.data.businessId" data-ng-options="option.businessArea for option in business" class="filter">
                                    </select>
                            </div>
                </div>
        </div>

    </body>
    <script type="text/javascript">
            var contextPath = "<%= request.getContextPath() %>";
            var appUrl = "<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>";
            var isSessionExpired = false; 
        </script> 
        <!-- JavaScripts Require JS Library and App JS Files -->
        <script type="text/javascript" data-main="<%=request.getContextPath() %>/resources/js/app/uptimeReport.js" src="<%=request.getContextPath() %>/resources/js/libs/requirejs/require.js"></script>    
</body>
</html>

uptimeReport.js

'use strict';

requirejs.config(
{
    /** set up any additional paths that are outside of your application base * */
    paths:
    {
        angular: contextPath + '/resources/js/libs/angularJS/angular',
         jquery: contextPath + '/resources/js/libs/jquery/jquery',
        uptimeReportBarChart : contextPath + '/resources/js/app/uptimeReportD3BarChart',
        uptimeReportD3LineChart : contextPath + '/resources/js/app/uptimeReportD3LineChart',
        d3Chart: contextPath + '/resources/js/libs/d3Charts/d3',
        d3pkChart: contextPath + '/resources/js/libs/d3Charts/pk'
    },
    /**
     * The following is not required in this example, but it is an example of
     * how to make non-AMD java script compatible with require
     */
    shim: {
        angular: {
            exports: 'angular'
        },
    d3Chart: ['jquery'],
    d3pkChart: ['d3Chart']
    },
    deps: ['app']
});

app.js

'use strict';

require([
    'angular'
], function (angular) {
    require([
        'controller/environmentController',
        'uptimeReportBarChart',
        'd3Chart', 'd3pkChart',
        'uptimeReportD3LineChart'

    ], function (appCtrl) {
        angular.
        module('myApp',[]).
        controller('appController', appCtrl);
        angular.bootstrap(document, ['myApp']);
        console.log("in App.js");
    });
});

environmentController.js

'use strict';

define([
    'angular'
], function (angular) {
    return ['$scope', '$http',
            function($scope, $http) {
        console.log("in controller123.js");
           var businessUrl="http://localhost:8080/UptimeReport/services/getBusinessAreas";  
                $http.get(businessUrl).then(function(response) {
                        $scope.business = [                     {
                                                                    "id": "0",
                                                                    "businessArea": "CURRENT",
                                                                    "businessId": "CURRENT"
                                                                },
                                                                    {
                                                                    "id": "114",
                                                                    "businessArea": "description of Version 2",
                                                                    "businessId": "version2"
                                                                },
                                                                    {
                                                                    "id": "126",
                                                                    "businessArea": "description of Version 3",
                                                                    "businessId": "version3"
                                                                },
                                                                    {
                                                                    "id": "149",
                                                                    "businessArea": "description of Version 4",
                                                                    "businessId": "version4"
                                                                }] ;
                 });


        }];
    });

Could you create fiddle or something so that I can check the code and directly instruct you? You can hard code the data for time being. The problem is on front end , I believe — pritesh
– pritesh, Commented Apr 14, 2016 at 19:55
I am able to load the default data if I hardcode the response out of http method.. whenever the response is loaded at runtime, default value is not getting set, but all the response is coming to the dropdown properly. — Ravi Sinha
– Ravi Sinha, Commented Apr 14, 2016 at 19:57

pritesh · Accepted Answer · 2016-04-14 20:22:18Z

1

I took a look at the code and made some corrections to make it work and understand your problem. Now coming to your problem solution. Add this line after retrieving the data using $http,get. $scope.item={versionID:$scope.versions[0]};

For reference you can check the fiddle link where I have added the line and updated the code: https://jsfiddle.net/prijuly2000/43cs0y0c/

The problem with your current approach is that the model for select box is not initialized so it displays empty in the box as the dropdown will display the current value set to the model. So above line sets the initial value for the model which renders the first option selected in the view. Let me know if this is not something that you didnt seek and I misunderstood the problem

answered Apr 14, 2016 at 20:22

pritesh

5434 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ravi Sinha Over a year ago

thanks for your help. Default value is getting set using ng-init but whenever the response is coming from http get(), ng-init is not working.

Ravi Sinha Over a year ago

the issue got resolved by setting the default value after getting the response. $scope.business.data = {businessId:$scope.business[0]};

Collectives™ on Stack Overflow

default data not coming in dropdown using angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related