正文

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

 2023-05-07  206

关键词：

【中文标题】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>

【讨论】：

从 TinyMCE 文本区域获取值

...:58:16【问题描述】：我的网站有一个新闻编辑器，我正在使用TinyMCE。我想要做的是有一个按钮（在TinyMCE编辑器本身之外），我可以单击该按钮以扫描文本区域中的任何图像，然后将这些图像列为选项以用于所述新闻文章的缩略... 查看详情

选项卡时选择文本区域文本

...42:30【问题描述】：我在StackOverflow上找到了thisquestion，并使用了顶部答案中给出的代码。否则它的效果非常好，但是有一个问题；在我的页面上，我有多个文本区域。其实我用的选择器就是"textarea"。但是，当从一个文本... 查看详情

在发布和重用值后，在文本区域中显示用换行符分隔的值

...015-09-0504:32:38【问题描述】：我在MVC、ASP.NET中有一个使用angularjs的解决方案，可以将值输入到文本区域并将它们发布到服务器。我可以使用ng-model从服务器接收值并在视图的文本区域中显查看详情

在控制器中编辑文本区域

...-06-0722:40:54【问题描述】：我是Java和JavaFX的新手。我已经使用SceneBuilder/FXML创建了一个JavaFX项目，并且我试图在程序开始时添加一个实时时钟，该时钟在屏幕顶部的整个程序中运行。我创建了一个文本区域并尝试从给定的代码中... 查看详情

如何使用文本区域？

】如何使用文本区域？【英文标题】：Howtouseatextarea?【发布时间】：2014-05-1404:51:48【问题描述】：我正在用java创建一个GUI，并想使用JTextArea，但是我在将它添加到框架时遇到了很多麻烦。我将如何创建一个文本区域，然后使用... 查看详情

如何使用自动建议创建自定义文本区域？

】如何使用自动建议创建自定义文本区域？【英文标题】：HowtocreateCustomTextareawithautosuggest?【发布时间】：2019-02-1005:00:04【问题描述】：我想要一个文本区域，它应该在文本区域内部有自动建议。建议列表应该是定制的。意思是... 查看详情

如何从输入字段搜索文本到文本区域，以及如何使用 Jquery 标记匹配结果？

】如何从输入字段搜索文本到文本区域，以及如何使用Jquery标记匹配结果？【英文标题】：HowtoSearchtextfrominputfieldtotextarea,andHowtomarkedmatchedresultUsingJquery?【发布时间】：2021-01-1302:22:59【问题描述】：我正在尝试创建简单的jquery应... 查看详情

如何使用 Jquery 获取添加的输入字段的值？

】如何使用Jquery获取添加的输入字段的值？【英文标题】：HowdoIgetthevalueoftheaddedinputfieldswithJquery?【发布时间】：2020-04-0620:41:15【问题描述】：我正在尝试从添加的输入字段中获取值并将其显示在文本区域中。一旦点击codeBtn，输... 查看详情

在 EclipseWindowBuilder 中将数据从一个窗口文本区域显示到另一个窗口文本区域

...2018-09-2322:36:20【问题描述】：我是Java新手我为公制单位创建了一个转换软件，现在我想创建一个新窗口，用于将转换单位的输出从一个窗口文本区域记查看详情

angular js：无法验证文本区域

】angularjs：无法验证文本区域【英文标题】：angularjs:Unabletovalidateatextarea【发布时间】：2016-10-2402:26:03【问题描述】：伙计们！我正在尝试在单击链接时验证文本区域。问题是，它没有进入表单。当用户点击一个链接时，在文本... 查看详情

为啥tinymce没有出现在动态添加的文本区域

...域【发布时间】：2016-09-2104:52:39【问题描述】：最近，我使用jquery、php和mysql完成了我的一个项目的无限滚动。创建之后，我面临tinymce编辑器未绑定到动态生成的文本区域的问题。我该怎么办？这是ti 查看详情

带有上传附件选项 HTML/JQuery 的文本区域

】带有上传附件选项HTML/JQuery的文本区域【英文标题】：TextareawithuploadattachmentsoptionsHTML/JQuery【发布时间】：2018-12-1608:54:39【问题描述】：我创建了允许用户输入文本的文本区域，如下所示：<!DOCTYPEhtml><html><body><te... 查看详情

IE10+ 上的 AngularJS，带有占位符的文本区域导致“无效参数”。

】IE10+上的AngularJS，带有占位符的文本区域导致“无效参数”。【英文标题】：AngularJSonIE10+,textareawithplaceholdercause"Invalidargument."【发布时间】：2013-12-1201:06:08【问题描述】：在IE10+上使用angularJS、TextArea和占位符时出现“... 查看详情

选择文本区域的最后一行

...20【问题描述】：我正在尝试创建一个java文本区域，它是使用文本创建的“在这里聊天！”被放置在文本区域内。然后我希望他们输入一个单词，然后按Enter。当他们按下回车键时，我希望能够从该行中选择文本-（即chatArea.getTex... 查看详情

HTML / Javascript：如何提交输入并使用提交/添加更多按钮填充文本区域

】HTML/Javascript：如何提交输入并使用提交/添加更多按钮填充文本区域【英文标题】：HTML/Javascript:Howtosubmitinputandhaveitfillinatextareawithasubmit/addmorebutton【发布时间】：2022-01-1112:15:05【问题描述】：所以我正在为一个班级创建一个预... 查看详情

如何将两个文本添加到一个文本区域？

...302:08:00【问题描述】：我想插入两个文本到一个文本区域使用javascript。P>我得到明文***，但我似乎无法给两个或两个以上的物品区分到文本区域。P>我使用的代码波纹管用于插入两节中的文本在文本区域中。P>pText=pText.subst... 查看详情

添加滚动到文本区域

...题描述】：如何将滚动条添加到我的文本区域。我已尝试使用此代码，但它不起作用。middlePanel=newJPanel();middlePanel.setBorder(newTitledBorder(newEtchedBorder(),"DisplayArea"));//createthemiddlepane 查看详情

将文本区域动态添加到容器 extjs

】将文本区域动态添加到容器extjs【英文标题】：Addingtextareadynamicallytocontainerextjs【发布时间】：2016-12-3007:13:10【问题描述】：我在动态向容器添加文本区域时遇到问题。容器的初始创建：xtype:\'container\',layout:\'form\',width:400,ref:\'f... 查看详情