angularjs json 两种方式绑定到文本区域答案

【问题标题】：angularjs json two way binding to text areaangularjs json 两种方式绑定到文本区域
【发布时间】：2016-08-04 11:25:49
【问题描述】：

我想以两种方式绑定到将包含 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]

【问题讨论】：

| json 在做什么？
@user2181397 将对象转换为 json 字符串
$scope.geojson 已经是一个 json 对象，这就是为什么你在 textarea 中得到 [object Object] 的原因，你将不得不使用 $scope.geojson 作为字符串，然后将字符串转换为 json。
可能重复http://stackoverflow.com/questions/17893708/angularjs-textarea-bind-to-json-object-shows-object-object

标签： javascript angularjs json

【解决方案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/

附：为无效的 json 添加一些处理。

【讨论】：

我认为你是对的。我的解决方案和你的一样：jsfiddle.net/bbhoey5g/5
docs.angularjs.org/api/ng/function/angular.toJson >> 还有第二个参数：'pretty'

【解决方案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 以获得更好的想法。

【讨论】：

【解决方案3】：

您想使用ng-model 中的$formatters 和$parsers 在模型中的对象和输入中显示的文本之间进行双射。

希望通过使用控制器功能会更简单。您显示文本并处理对象。 getJson() 方法完成工作

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

然后：

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

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

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

【讨论】：