如何使用angularjs编辑和验证JSON数据?

时间:2016-10-21 04:49:52

标签: javascript jquery angularjs json

我正在dropdown成功地从textarea获取并显示所选文件的json数据。现在我的要求是我想使用textareaangularjs)或任何ng-jsoneditorother libraries/tools编辑所选文件的json数据以进行验证。我已尝试过以下操作,但我无法按预期编辑内容,或按照预期编辑内容:libraries默认情况下点击object {0} (empty object) }按钮。

我关注this

我在Plnkr创建了上述代码。

1 个答案:

答案 0 :(得分: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';
            };
    };

});

Here's一个正在运作的Plnkr。
文档中的示例还显示了this