AngularJSでデータ検証設定を行い、toJSONメソッドを使用するとエラーが発生する

文書番号 : 39619 文書種別 : 不具合登録日 : 2016/10/03 最終更新日 : 2017/03/29

対象製品

SpreadJS 9J

発生環境

9.20161.0

状況

修正済み

詳細

製品機能であるAngularJS用Validatorディレクティブで次の属性を定義している場合にtoJSONメソッドを使用するとエラーが発生します。

【エラーが発生する属性】
ignoreBlank, inCellDropdown, showinputMessage, showErrorMessage, errorStyle, inputMessage, inputTitle, errorMessage, errorTitle

【再現手順】
1.以下の再現コードを実行します。

【現象】
コード実行時にエラーが発生します。

【再現コード JavaScript ファイル名test.js】
var app = angular.module('spread-app', ['gcspreadsheets']);
app
　　.controller('excel-ctrl', [ '$scope', '$http',　function ($scope, $http) {
　　　　var initLoad = true;
　　　　angular.element(document).ready(function () {
　　　　　　
　　　　　　$scope.spread = $("#spd").data("workbook");
　　　　　　$scope.sheet = $scope.spread.getSheetFromName("modelData");
　　　　　　
　　　　　　//データ連結完了後処理
　　　　　　$scope.$watch("modeldata", function (newData, oldData) {
　　　　　　　　if (newData === oldData) { return; }
　　　　　　　　
　　　　　　　　if (initLoad) {
　　　　　　　　　　console.log($scope.spread.toJSON());
　　　　　　　　　　initLoad = false;
　　　　　　　　}
　　　　　　}, false);
　　　　　　
　　　　　　/**
　　　　　　 * 参照実装 - 画面初期表示データの読み込み
　　　　　　 */
　　　　　　$http.get("testdata.json").then(
　　　　　　　　function (response) {
　　　　　　　　　　//成功時処理
　　　　　　　　　　$scope.modeldata = response.data;
　　　　　　　　},
　　　　　　　　function (response) {
　　　　　　　　　　// データ読み込み失敗時の処理
　　　　　　　　});
　　　　});
　　}]);

【再現コード HTML ファイル名test.html】

※下記のコードは属性「showErrorMessage」「errorMessage」を用いた例です。

<!DOCTYPE html>
<html ng-app="spread-app">
　<head>
　　<title>Sample</title>
　　<meta charset="utf-8">
　　<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
　　<script type="text/javascript" src="https://code.angularjs.org/1.2.22/angular.min.js"></script>
　　<script type="text/javascript" src="https://code.angularjs.org/1.2.22/angular-route.min.js"></script>
　　<link href="http://cdn.grapecity.com/spreadjs/9201610/css/gc.spread.sheets.excel2016colorful.9.20161.0.css" rel="stylesheet" type="text/css" />
　　<script src="http://cdn.grapecity.com/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js" type="text/javascript"></script>
　　<script src="http://cdn.grapecity.com/spreadjs/9201610/scripts/interop/angular.gc.spread.sheets.9.20161.0.min.js" type="text/javascript"></script>
　　<script src="test.js"></script>
　</head>
　<body>
　　<div class="container" ng-controller="excel-ctrl">
　　　　<gc-spread-sheets id="spd" style="height: 400px;">
　　　　　<worksheets>
　　　　　　<worksheet datasource="modeldata" name="modelData">
　　　　　　　<columns>
　　　　　　　　<column datafield="testValue">
　　　　　　　　　<default-style >
　　　　　　　　　　<number-validator isIntegerValue = "true" comparisonoperator="between" value1="0" value2="250" showErrorMessage="true" errorMessage="0-250の範囲で値を入力してください。"></number-validator>
　　　　　　　　　</default-style>
　　　　　　　　</column>
　　　　　　　</columns>
　　　　　　</worksheet>
　　　　　</worksheets>
　　　　</gc-spread-sheets>
　　　</div>
　　</div>
　</body>
</html>

【再現コード JSON ファイル名testdata.json】
[
{
"testValue": 200
},
{
"testValue": 110
}
]

回避方法

SpreadJS 9J SP2(Ver.9.20171.0)で修正済み