如何使用angularjs編輯和驗證JSON數據？

Question

我正在從textarea dropdown中成功獲取並顯示所選文件的json數據。 現在我的要求是我想使用angularjs （ ng-jsoneditor ）或other libraries/tools任何other libraries/tools來編輯textarea所選文件的json數據。 我已經嘗試了以下方法，但是我無法使其按預期的方式工作或與該libraries或任何其他libraries集成以按預期方式編輯內容：默認情況下為object {0} (empty object)或單擊“ change options按鈕。

我下面這個 。

我已經在Plnkr中創建了以上代碼。

Answer 1

您需要直接在范圍內聲明“ obj”對象

app.controller('MainCtrl', function($scope,$http) {

    $scope.JSONFiles = [];
    $scope.obj = {data: '', options: { mode: 'tree' }}; 

    $http.get("test1.json").success(function (response) {
      $scope.JSONFiles.push(response);
    });
    $http.get("test2.json").success(function (response) {
       $scope.JSONFiles.push(response);
    });

    $scope.selectedjson ="";
    $scope.textAreaData = "";
    $scope.optionChanged = function(){
      $scope.textAreaData = $scope.selectedjson;
     // alert($scope.textAreaData);//gives selected file json data
      // code to implement json-editor

       $scope.obj = {data: $scope.textAreaData, options: {mode: 'tree'}};
            $scope.onLoad = function (instance) {
                instance.expandAll();
            };
            $scope.changeOptions = function () {
                $scope.obj.options.mode = $scope.obj.options.mode == 'tree' ? 'code' : 'tree';
            };
    };

});

這是工作中的Plnkr。
文檔中的示例也顯示了這一點