0
角度JSの選択ボックスにデータをロードしようとしています。データがロードされていますが、デフォルト値は次のように空になります。誰でも助けてください。角度データを使用してデフォルトデータがドロップダウンされない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"
}] ;
});
}];
});
コードを確認して直接指導できるように、フィドルなどを作成できますか？あなたは当分の間、データをハードコードすることができます。問題はフロントエンドにあると私は信じている – pritesh
httpメソッドからレスポンスをハードコードすると、デフォルトのデータを読み込むことができます。応答が実行時にロードされると、デフォルト値は設定されませんが、ドロップダウンに正しく表示されます。 –
js fiddle url = https://jsfiddle.net/ur70zpak/ –