Question

我正在尝试将数据加载到角度JS中的选择框中。数据正在加载，但默认值为空，如下所示。请任何人帮忙。

<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>

请在下面找到我的代码：

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"
                                                                }] ;
                 });


        }];
    });

Answer 1

我查看了代码并进行了一些更正，以使其工作并理解您的问题。现在来找你的问题解决方案。使用$http,get检索数据后添加此行。 $scope.item={versionID:$scope.versions[0]};

供参考，您可以查看我添加了该行的小提琴链接并更新了代码：https://jsfiddle.net/prijuly2000/43cs0y0c/

您当前方法的问题是选择框的模型未初始化，因此它在框中显示为空，因为下拉列表将显示设置给模型的当前值。因此，在线上方设置模型的初始值，该模型呈现在视图中选择的第一个选项。如果这不是你没有找到的东西让我知道，我误解了这个问题

默认数据不使用angular JS进入下拉列表

1 个答案: