Question

我正在创建一个页面，用户可以将报告命名为PDF。我试图使用Angular创建它。当用户更改报告类型时，会在页面上显示的调试信息中正确更新。但是，对报告的请求是作为JSON发送的，我更喜欢这个JSON对象也是自动更新的。就像现在一样，我必须点击“创建JSON”按钮才能更新它。

这个例子也可以在JSFiddle上看到：http://jsfiddle.net/HenricF/wgvd7wLx/2/

重要 JSON对象不仅包括报告类型，还包括此处未显示的许多其他选项。这些选项包括帐户，语言和日期，并且只要更改了其中任何一个，JSON对象最好应更新。我很抱歉最初没有提到这一点。

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

})

Answer 1

尝试此更改：

    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>

JSFiddle

这将解决您的问题

Answer 2

我最终解决了这个问题（感谢deitch和Dipali Vasani的意见）：

一旦输入更改，pdfData就会手动更新 - 我无法找到让它自动更新的方法。

这是我在HTML中的方式：

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

这就是我在JS中的表现：

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

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

2 个答案: