我希望能够编辑和显示在＆LT复杂的模型; textarea的＆GT; 元素。下面是HTML片从JSON响应dynamicaly生成模型的字段：

I would like to be able to edit and display complex model in a <textarea> element. Here's the HTML piece for generating model's fields dynamicaly from JSON response:

<p>parent uuid*: </p>
<input ng-model="parentUuid" capitalize type="text" placeholder="String"
    class="form-control" style="width:200px; display: inline-block;"/> <br/>
<p>resource*:</p>
<select ng-model="childResource" ng-change="loadResourceFields(childResource)" 
    class="form-control" style="width:300px; display: inline-block;">
    <option ng-repeat="childResource in restResources">{{childResource}}</option>
</select>
<div ng-repeat="field in childFields">
    <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="createChildResource[field.name]"
            class="form-control" style="width:200px; display: inline-block;" placeholder="{{parseClassName(field.type)}}">
    </div>
    <div ng-show={{field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <select ng-model="createChildResource[field.name]" class="form-control" style="width:auto; display: inline-block;">
            <option></option>
            <option ng-repeat="enumValue in field.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>
        </select>
    </div>
</div>
<div class="preview">
    <p>Preview: </p>
    <textarea style="height:350px; width:550px; overflow:scroll;">{{createChildResource | json}}</textarea >
</div>

的输出是下面的：

The output is the following:

但是，如果我尝试添加 ngModel 来一个textarea元素能在地方编辑这个值是这样的：

But if I try to add a ngModel to a textarea element to be able to edit this values in place like this:

<div class="preview">
    <p>Preview: </p>
    <textarea ng-model="createChildResource" style="height:350px; width:550px; overflow:scroll;">{{createChildResource | json}}</textarea>
</div>

然后输出为以下内容：

then the output is the following:

在这两种情况下，我不能在textarea元素编辑我的模型。

In both cases I can't edit my model in a textarea element.

任何想法如何可以做到这一点？我希望能够显示在这个例子中有轻微的影响力 ：编辑-的textarea =user.description应编辑-的textarea =用户。

Any ideas how this can be achieved? I'd like to be able to display and edit my model inplace like in this example with a slight difference: editable-textarea="user.description" should be editable-textarea="user".

谢谢意见。

推荐答案

我终于明白你想达到什么目的。在左边你有一大堆的投入和右侧（底部），你有安排的输入为一个对象的属性，并将其显示格式为对象的textarea的。

I finally understand what you are trying to achieve. On the left you have a bunch of inputs and on the right (bottom), you have a textarea that arranges the inputs as properties of one object and displays them formatted as an object.

您的要求是允许用户在编辑文本区域的属性值，从而更新输入相应的属性值。

Your requirements is to allow user to edit the property values in the textarea and thus update the corresponding property value in the input.

首先，作为评价的对象转换为字符串，然后显示它textarea的内部。

First, as commented, convert the object to a string and then show it inside the textarea.

接下来，因为你需要作出反应和更新时，textarea的更新，需要观看输入域 textarea的值，并更新原始对象（一个被转换成字符串）。

Next, since you need to react and update the input fields when the textarea is updated, you need to watch the value of the textarea and update the original object (the one that was converted to string).

在这里使用一个例子，因为你的code是太复杂，理解，让我们说，你有对象 containerObject 如下：

Using an example here since your code is too complex to understand, let us say that you have the object containerObject as follows:

$scope.containerObject = {
    property_1: "Hello",
    property_2: "World"
};

您输入然后使用这些属性：

Your inputs then make use of these properties:

<input ng-model="containerObject.property_1">

<input ng-model="containerObject.property_2">

现在，你希望你的textarea里显示这一点 - 你会首先将对象转换为字符串，并将其显示如下：

Now, you wish to display this inside your textarea - you will first convert the object to string and display it as follows:

$scope.getObjectAsText = function () {
    $scope.textAreaModel = JSON.stringify($scope.containerObject);
};

和您的textarea的标识看上去象这样：

And your textarea markup will look like:

<textarea ng-model="textAreaModel"></textarea>

每一次输入文本框的值更改，textarea的也将被更新。

Each time the value in the input textboxes change, the textarea also gets updated.

现在，对周围的其他方法。当您更改文本区域，有输入文本框得到更新，你需要注意的弦模型（而不是对象模型）：

Now, for the other way around. When you change the textarea, to have the input textboxes get updated, you need to watch the string model (and NOT the object model):

$scope.$watch('textAreaModel', function () {
    try {
        $scope.containerObject = JSON.parse($scope.textAreaModel);
    } catch(exp) {
        //Exception handler
    };
});

您需要有的try ... catch 异常处理程序块，因为用户可能会意外更改的内容，这样就转换回对象，结果是不是适合对象（无效的属性或无效的语法）。

You need to have the try...catch exception handler block because the user may accidentally change the contents such that on converting back to object, the result is not a suitable object (invalid property or invalid syntax).

只要仅属性值改变时，输入值将得到正确更新

As long as only the property value is changed, the input values will get updated correctly.