在Textarea的Current Cursor位置插入文本使用AngularJs Ng-Click [英] Inserting text at Current Cursor position in Textarea Using AngularJs Ng-Click
问题描述
单击一个按钮，将生成一些文本，并将其添加到textarea中。
Button正在使用Ng-Onclick。
按钮代码如下。
< input type =submitvalue =Add to formclass =btn btn-primaryng-click =addToFormID（$ index）/>
但是很多按钮会在那里，如果添加了4个组件4个按钮将会在那里生成公式。
以下是我的TextArea代码：
< textarea汇总ng-change =setSummarisationFormulaDynamic（）cols =100rows =4>< / textarea>
以下是我的脚本。
<$ p
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ =[+ $ scope.vm.Dependencies [index] .NeName +：{+ $ scope.vm.Dependencies [index] .DbId +，+ $ scope.vm.Dependencies [index] .VersionId +}] ;
$ b $ else else
$ scope.vm.Summarisation + =[+scope.vm.Dependencies [index] .Name +：{+ $ scope.vm.Dependencies [index] .ID + + $ scope.vm.Dependencies [指数] .VersionId +}];
$ scope.setSummarisationFormDynamic（）;
}
我们可以看到其他部分$ scope.vm.SummarisationForm + = so它会+下一个公式到上一个公式，所以我想修改这一个，并需要添加我保持光标的内容。
现在我点击了什么它将它添加到内容的末尾，如果我输入Enter键保持光标到下一行的第一行，它也将它添加到已经有文本的那一行，所以我想找到光标位置并插入
我对角度js非常陌生，所以请帮助我用按钮的基本想法如何实现和脚本修改
编辑：这是ASP.NET MVC5应用程序。
如果您需要进一步的细节请让我知道。
在此先感谢所有人。
这是我的英雄问题解决了。他解决了我的问题真是太棒了。
以及我刚刚创建的指令元素如本链接中所述，并在我的视图中调用了该指令。
繁荣它的工作。
http://plnkr.co/edit/Xx1SHwQI2t6ji31COneO?p=preview
app.directive（'myText'，['$ rootScope'，function（$ rootScope）{
return {
link：function（scope，element，attrs）{
$（'add'，function（e，val）{
var domElement = element [0];
if（document.selection）{
domElement。 focus（）;
var sel = document.selection.createRange（）;
sel.text = val;
domElement.focus（）;
} else if（domElement.selectionStart || domElement.selectionStart === 0）{
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = do mElement.scrollTop;
domElement.value = domElement.value.substring（0，startPos）+ val + domElement.value.substring（endPos，domElement.value.length）;
domElement.focus（）;
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value + = val;
domElement.focus（）;
}
}）;
}
}
}]）;
查看这样的调用，
指令名字是，myText。
We are trying to implement like below requirement. Click of a button some text will be generated and it will be added into textarea. Button is using Ng-Onclick.
Button Code is below.
<input type="submit" value="Add to form" class="btn btn-primary" ng-click="addToFormID($index)" />
But many buttons will be there like if am adding 4 components 4 buttons will be there to generate the formula.
and Here is my TextArea Code:
<textarea id="summarFormula" ng-model=".Summarisation" ng-change="setSummarisationFormulaDynamic()" cols="100" rows="4"></textarea>
and Here is my Script.
$scope.addToFormID = function(index){
if( $scope.vm.SummarisationForm==null)
{
$scope.vm.SummarisationForm ="["+ $scope.vm.Dependencies[index].NeName+":{"+$scope.vm.Dependencies[index].DbId+","+$scope.vm.Dependencies[index].VersionId+"}]";
}else
$scope.vm.Summarisation+="["+ $scope.vm.Dependencies[index].Name+":{"+$scope.vm.Dependencies[index].Id+","+$scope.vm.Dependencies[index].VersionId+"}]";
$scope.setSummarisationFormDynamic();
}
We can see that in else part $scope.vm.SummarisationForm += so it will + the next formula to previous one so i wants to modify this one and needs to add the content where i am keeping the cursor.
Now What ever I am clicking it is adding it to the end of the content , If am entering enter key keeping cursor into first line of the next line also it is adding it to the same line which already text is there so i wants to find the cursor position and insert into the text where exactly keeping cursor or entering enter key position.
I am very new to angular js so please help me with basic idea with button how can i implement and script modification how can i do it.?
Edit : It is ASP.NET MVC5 Applicaiton.
If you need further more details please let me know.
Thanks in advance to all.
Here is the hero which my issues was resolved. Who ever it is really great that he solved my problem.
and What exactly done is I created directive element as mentioned in this link and called that directive in my view .
Boom it worked.
http://plnkr.co/edit/Xx1SHwQI2t6ji31COneO?p=preview
app.directive('myText', ['$rootScope', function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('add', function(e, val) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
} else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}]);
View Calling like this,
directive name is , myText.
这篇关于在Textarea的Current Cursor位置插入文本使用AngularJs Ng-Click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
