AngularJS json Zweiweg Bindung an Textbereich

Question

ich auf zwei Art und Weise will einen Textbereich verbindlich, das JSON-Objekt als Text enthält, und ich soll das JSON-Objekt in Textfeld als Zweiweg bearbeiten kann. working demo is here

<div ng-app="app"> 
    <div ng-controller="GeojsonController"> 
    <textarea ng-model="geojson"></textarea> 
    <p>Geojson is: {{geojson | json}} </p> 
    </div> 
</div> 

angular.module('app', []) 
    .controller('GeojsonController', ['$scope', function($scope) { 
    $scope.geojson = { 
     "type": "FeatureCollection" 
    }; 
    }]); 

Textbereich Inhalt ist [object Object]

Answer 1

<textarea ng-model="geojson" ng-change="update()"></textarea> 

$scope.geo = { 
    "type": "FeatureCollection" 
}; 
$scope.geojson = angular.toJson($scope.geo); 

$scope.update = function() { 
    $scope.geo = angular.fromJson($scope.geojson); 
} 

https://jsfiddle.net/f9fnetca/1/

P. S. Fügen Sie eine Behandlung für ungültiges json hinzu.

Answer 2

Sie möchten $formatters und $parsers von ng-model verwenden, um eine Bijektion zwischen dem Objekt in Ihrem Modell und dem in der Eingabe angezeigten Text zu erstellen.

Hoffentlich ist es viel einfacher, mit einer Controller-Funktion zu arbeiten. Du zeigst Text und arbeitest an einem Objekt. Die getJSON() Methode macht die Arbeit

<div ng-app="app"> 
    <div ng-controller="GeojsonController"> 
    <textarea ng-model="geojson"></textarea> 
    <p>Geojson is: {{getJson(geojson) | json}} </p> 
    </div> 
</div> 

Dann:

angular.module('app', []) 
    .controller('GeojsonController', ['$scope', function($scope) { 
    $scope.geojson = '{"type": "FeatureCollection"}'; 

    $scope.getJson = function(){ 
     return JSON.parse($scope.geojson); 
    } 
    }]); 

Hier ist JSFiddle: https://jsfiddle.net/bbhoey5g/6/

Answer 3

Sie eine benutzerdefinierte Richtlinie umsetzen kann, mit $formatters und $parsers

.directive('toJson', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
    ctrl.$formatters.push(JSON.stringify); 
    } 
    } 
}); 

<textarea ng-model="geojson" to-json></textarea>

Überprüfen Sie das Beispiel für die benutzerdefinierte Validierung in the docs, um eine bessere Idee zu erhalten.