I have created a web page where users can order reports in PDF format. The implementation was done using Angular. When a user changes the report type, the debug information on the page is updated correctly. However, the request for a report is sent as JSON and I would like the JSON object to be automatically updated as well. Currently, I have to click on the "Create JSON" button for it to be refreshed.
You can view this example on JSFiddle here: http://jsfiddle.net/HenricF/wgvd7wLx/2/
IMPORTANT: The JSON object will not only contain the report type but also various other options such as accounts, languages, and dates. Ideally, the JSON object should update whenever any of these options are changed. My apologies for not mentioning this earlier.
HTML
<body ng-app="OrderPageApp">
<div id="all" ng-controller="ReportController">
<div id="top">
<div class="pagesection" id="ChooseReportType">
<h3>Select report type</h3>
<select id="dropdownlist" ng-change="setAccountTypes(chosenReport)" ng-options="report.name for report in reports" ng-model="chosenReport"></select>
</div>
<div class="pagesection" id="ChooseLanguage">
<h3>Select language</h3>
<select id="dropdownlist" ng-options="language.name for language in languages" ng-model="chosenLanguage"></select>
</div>
<div class="pagesection" id="IncludeHeadlines">
<h4>Include headlines</h4>
<input name="includeHeadlines" type="checkbox" ng-model="includeHeadlines">
</div>
<div class="bottom" id="bottom">
<h4>Selected report</h4>
<div id="reportName">Name: {{name}}</div>
<div id="reportCode">Code: {{code}}</div>
<div id="Language">Language: {{chosenLanguage.code}}</div>
<div id="includeHeadlines">Include headlines: {{includeHeadlines}}</div>
<h4>JSON data</h4>
<input type="button" value="Create JSON" ng-click="showJson()">
<div id="pdfData"><pre>{{pdfData}}</pre>
</div>
</div>
</div>
JS
var reportTypes = [{
name: 'Report type 1',
code: 1
}, {
name: 'Report type 2',
code: 2
}, {
name: 'Report type 3',
code: 3
}];
var languages = [{
name: 'Swedish',
code: 1053
}, {
name: 'English',
code: 1033
}];
var app = angular.module('OrderPageApp', []);
app.controller('ReportController', function ($scope) {
$scope.reports = reportTypes;
$scope.languages = languages;
$scope.setAccountTypes = function (chosenReport) {
$scope.name = chosenReport.name;
$scope.code = chosenReport.code;
};
$scope.showJson = function () {
$scope.pdfData = angular.toJson(new CreatePdfData($scope.name, $scope.chosenLanguage, $scope.includeHeadlines));
};
function CreatePdfData(reportType, chosenLanguage, includeHeadlines) {
this.reportType = reportType;
this.chosenLanguage = chosenLanguage.code;
this.includeHeadlines = includeHeadlines;
};
})