Question

我希望双向绑定到将包含json对象作为文本的文本区域，并且我应该能够以双向方式编辑textarea中的json对象。 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"
    };
  }]);

文字区域内容为[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。为无效的json添加一些处理。

Answer 2

您可以使用$formatters和$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>

查看自定义验证示例in the docs以获得更好的建议。

Answer 3

您希望使用$formatters的{{1}}和$parsers在模型中的对象和输入中显示的文本之间进行双射。

希望通过使用控制器功能可以更简单。您显示文本并处理对象。 getJson（）方法使工作

ng-model

然后：

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

这是JSFiddle：https://jsfiddle.net/bbhoey5g/6/

angularjs json双向绑定到文本区域

3 个答案: