Javascript 如何使用AngularJS自动更新此JSON对象？_Javascript_Json_Angularjs

Javascript 如何使用AngularJS自动更新此JSON对象？

javascript json angularjs

Javascript 如何使用AngularJS自动更新此JSON对象？,javascript,json,angularjs,Javascript,Json,Angularjs,我正在创建一个页面，用户可以在其中以PDF格式订购报告。我试着用Angular创建它。当用户更改报告类型时，该类型将在页面上显示的调试信息中正确更新。但是，报告请求是以JSON的形式发送的，我更希望这个JSON对象也是自动更新的。现在，我必须单击“创建JSON”按钮才能更新它这个例子也可以在JSFIDLE上看到：重要的 JSON对象不仅包括报表类型，还包括许多此处未显示的其他选项。这些选项包括帐户、语言和日期，JSON对象最好在任何更改时更新。很抱歉，一开始我没有提到这一点 HTML 尝试以

我正在创建一个页面，用户可以在其中以PDF格式订购报告。我试着用Angular创建它。当用户更改报告类型时，该类型将在页面上显示的调试信息中正确更新。但是，报告请求是以JSON的形式发送的，我更希望这个JSON对象也是自动更新的。现在，我必须单击“创建JSON”按钮才能更新它

这个例子也可以在JSFIDLE上看到：

重要的 JSON对象不仅包括报表类型，还包括许多此处未显示的其他选项。这些选项包括帐户、语言和日期，JSON对象最好在任何更改时更新。很抱歉，一开始我没有提到这一点

HTML

尝试以下更改：

var报告类型=[{
名称：“报告类型1”，
代码：1
}, {
名称：“报告类型2”，
代码：2
}, {
名称：“报告类型3”，
代码：3
}];
变量语言=[{
名称：“瑞典语”，
代码：1053
}, {
姓名：‘英语’，
代码：1033
}];
var-app=angular.module（'OrderPageApp'，[]）；
app.controller（'ReportController'，函数（$scope）{
$scope.reports=报告类型；
$scope.languages=语言；
$scope.setAccountTypes=函数（chosenReport）{
$scope.name=chosenReport.name；
$scope.code=chosenReport.code；
};
$scope.showJson=function（）{
var name=$scope.name；
var chosenLanguage=$scope.chosenLanguage；
var includeHeadlines=$scope.includeHeadlines；
如果（名称==未定义）{
name=null；
}
if（chosenLanguage==未定义）{
chosenLanguage=null；
}
如果（包括标题行==未定义）{
includeHeadlines=假；
}
$scope.pdfData=angular.toJson（新的CreatePdfData（名称、chosenLanguage、includeHeadlines））；
};
函数CreatePdfData（报表类型、chosenLanguage、includeHeadlines）{
this.reportType=reportType；
this.chosenLanguage=chosenLanguage！=null？chosenLanguage.code:null；
this.includeHeadlines=includeHeadlines；
};
})


选择报告类型
选择语言
包括标题
选定报告
名称：{{Name}
代码：{{Code}}
语言：{{chosenLanguage.code}
包括标题：{{includeHeadlines}
JSON数据
{{pdfData}}

我最终解决了这个问题（多亏了deitch和Dipali Vasani的输入）：

pdfData在任何输入发生更改时都会手动更新-我无法找到自动更新的方法

这是我在HTML中的实现方式：

你在说这个吗？我不明白。为什么您不能只修改

setAccountTypes（）

，使其中也包含“$scope.pdfData=angular.toJson（newcreatepdfdata（$scope.name））；”？迪帕利瓦萨尼是的，就是这个。多谢各位@因为对于每种报告类型，还有几个其他选项也包含在随后发送的JSON中（例如帐户、日期和语言）。我在代码中遗漏了这些内容，以使示例尽可能少。@HenricF，好的，那么您可以更新问题，以便我们了解为什么这样做不起作用以及需要发生什么？请描述整个流程。@Detch是的，我现在正在做。对不起，谢谢你的建议。由于在订购报告之前，还可以选择其他选项，所以这不太管用。我将更新原始问题。您可以更新完整代码，以便有人可以回答correctly@HenricF：检查更新的答案这肯定会帮助您解决问题。

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

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

})

<input name="includeHeadlines" type="checkbox" ng-model="includeHeadlines" ng-change="showJson()">

$scope.setAccountTypes = function (chosenReport) {
    ...
    $scope.showJson();
};