How can I update this JSON object automatically using AngularJS?
Question
I am creating a page where users can order reports as PDF. I have tried to create it using Angular. When the user changes a report type, this is correctly updated in the debug information present on the page. However, the request for a report is sent as JSON and I would prefer if this JSON object was updated automatically as well. As it is now, I have to click on the "Create JSON" button for it to be updated.
This example can be seen over at JSFiddle as well: http://jsfiddle.net/HenricF/wgvd7wLx/2/
IMPORTANT The JSON object will not only include the report type, but also a lot of other options not shown here. These options include accounts, languages and dates and the JSON object should preferably be updated whenever anyone of these are changed. I am sorry for not mentioning this initially.
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;
};
})
2 answers
solution1
0 2014-12-04 10:33:40
try this changes :
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() { var name = $scope.name; var chosenLanguage = $scope.chosenLanguage; var includeHeadlines = $scope.includeHeadlines; if (name == undefined) { name = null; } if (chosenLanguage == undefined) { chosenLanguage = null; } if (includeHeadlines == undefined) { includeHeadlines = false; } $scope.pdfData = angular.toJson(new CreatePdfData(name, chosenLanguage, includeHeadlines)); }; function CreatePdfData(reportType, chosenLanguage, includeHeadlines) { this.reportType = reportType; this.chosenLanguage = chosenLanguage != null ? chosenLanguage.code : null; this.includeHeadlines = includeHeadlines; }; })
<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);showJson()" 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" ng-change="showJson()"></select> </div> <div class="pagesection" id="IncludeHeadlines"> <h4>Include headlines</h4> <input name="includeHeadlines" type="checkbox" ng-model="includeHeadlines" ng-change="showJson()"> </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> </body>
This will solve your problem
solution2
0 ACCPTED 2014-12-05 07:11:08
I ended up solving it like this (thanks to the input from deitch and Dipali Vasani):
The pdfData was updated manually as soon as any input was changed - I couldn't figure out a way to have it update automatically.
This is how I did it in HTML:
<input name="includeHeadlines" type="checkbox" ng-model="includeHeadlines" ng-change="showJson()">
And this is how I did it in JS:
$scope.setAccountTypes = function (chosenReport) {
...
$scope.showJson();
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.