Angular JS在textarea中显示和编辑模型

Question

我希望能够在<textarea>元素中编辑和显示复杂模型.这是用于从JSON响应动态生成模型字段的HTML部分:

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

输出如下:

但是,如果我尝试添加一个ngModeltextarea元素,以便能够像这样编辑这个值:

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

然后输出如下:

在这两种情况下,我都无法在textarea元素中编辑我的模型.

怎么能实现这一目标？我希望能够在这个示例中显示和编辑我的模型,只是略有不同:editable-textarea="user.description"应该是editable-textarea="user".

Answer 1

我终于明白你想要实现的目标.在左侧有一堆输入,在右侧(底部),您有一个textarea,它将输入排列为一个对象的属性,并将它们显示为对象.

您的要求是允许用户编辑textarea中的属性值,从而更新输入中的相应属性值.

首先,如注释,将对象转换为字符串,然后在textarea中显示它.

接下来,由于在更新textarea时需要响应并更新输入字段,因此需要watchtextarea的值并更新原始对象(已转换为字符串的对象).

在这里使用一个例子,因为你的代码太复杂而无法理解,让我们说你有containerObject如下对象:

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

然后您的输入将使用这些属性:

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

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

现在,您希望在textarea中显示它 - 您将首先将对象转换为字符串并显示如下:

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

您的textarea标记将如下所示:

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

每次输入文本框中的值更改时,textarea也会更新.

现在,反过来说.更改textarea时,要使输入文本框得到更新,您需要查看字符串模型(而不是对象模型):

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

您需要拥有try...catch异常处理程序块,因为用户可能会意外更改内容,以便在转换回对象时,结果不是合适的对象(无效属性或无效语法).

只要更改属性值,输入值就会正确更新.