2016-08-04 8 views
2

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 hereAngularJS json Zweiweg Bindung an Textbereich

<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]

+0

was ist '| json's tun? – brk

+0

@ user2181397 Konvertiert ein Objekt in einem JSON-String –

+0

'$ scope.geojson' ist bereits ein JSON-Objekt, das ist, warum Sie erhalten' [object Object] 'in Ihrem Textbereich, werden Sie' $ scope.geojson zu verwenden 'als String und konvertiere dann den String in json. –

Antwort

2
<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.

+0

ich denke du hast recht. Meine Lösung ist die gleiche wie Ihre: https://jsfiddle.net/bbhoey5g/5/ –

+0

ist möglich formatierte JSON-Zeichenfolge in Textarea? – barteloma

+0

https://docs.angularjs.org/api/ng/function/angular.toJson >> Es gibt ein zweites Argument: 'hübsch' –

1

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/

2

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.

Verwandte Themen