Angularjs 使用选项从模板添加值创建文本区域

Question

我正在尝试创建一个表单文本区域，用户可以在其中键入文本并可以选择一些预定义的模板。

在这里我想让用户输入 textarea 并且还可以选择从上面的 input 框中搜索一些预定义的模板。

我可以打字，但是当从模板中添加值时，它不会添加到 `textarea。

在 input 框中，我有一个 onChange 函数，用于将所选模板附加到文本区域的 ng-model。

用户可以输入几行然后添加一些模板。

模板只是用户之前添加的几个字符串。

模板示例："this is a wonderful place."

<input id="catg" type="text" placeholder="Enter Text / Select Template" ng-model="newData" class="form-control" uib-typeahead="template as template.content for template in getTemplate($viewValue) | limitTo:8" typeahead-on-select="onSelect($item)" typeahead-min-length="1" typeahead-no-results="noResults">

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

js:

$scope.onSelect = function(data) {
    $scope.userValue.concat(data)
}

Answer 1

您的输入字段模型是 newData。因此，将该值传递给 onSelect() 函数。

<input id="catg" type="text" placeholder="Enter Text / Select Template" ng-model="newData" class="form-control" uib-typeahead="template as template.content for template in getTemplate($viewValue) | limitTo:8" typeahead-on-select="onSelect(newData)" typeahead-min-length="1" typeahead-no-results="noResults">

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

Answer 2

您可以观察文本区域的 ng-model 值的任何变化并相应地更新文本区域

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.txt='';
    
    $scope.reset = function() {
        $scope.txt = '';
    };
    $scope.$watch('template.text',function(oldval,newval){
      if(newval!==undefined)
       $scope.txt= newval + "\n";
    
    })
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<input style="float:left;" type="text" ng-model="template.text">
<textarea id="textarea" ng-model="txt" style="float:left;">
    
</textarea>

    <div>{{txt}}</div>

<!--<button id='btn' ng-click="txt=''">Reset textarea</button>-->
    <button id='btn' ng-click="reset()">Reset textarea</button>
</div>

Angularjs 使用选项从模板添加值创建文本区域

Angularjs Create textarea with option add value from template

textarea

angularjs