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

Posted 2023-05-07

【中文标题】Angularjs使用选项从模板添加值创建文本区域

【英文标题】：Angularjs Create textarea with option add value from template

【发布时间】：2018-01-01 06:03:05

【问题描述】：

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

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

我可以输入，但是在从模板中添加值时，它不会添加到 `textarea。

在input 框中，我有一个onChange 函数将所选模板附加到textarea 的ng-model。

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

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

模板示例：“这是一个很棒的地方。”

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

【问题讨论】：

您想在模板中添加用户选择的要在 textarea 中打印的值？

@Vivz 是的，选择的值应该打印在文本区域中，用户也应该能够直接在其中输入文本

你能贴一些你试过的代码吗

@Vivz 我已经添加了我尝试过的html和js

你在寻找类似jsfiddle.net/fzre25nb/107的东西吗？

【参考方案1】：

您可以观察文本区域的 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>

【参考方案2】：

您的输入字段模型是 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>