使用AngularJs Ng-Click在Textarea中的当前光标位置插入文本

时间:2016-07-12 13:17:37

标签: javascript html angularjs

我们正在努力实施以下要求。 单击一个按钮将生成一些文本,它将被添加到textarea中。 Button正在使用Ng-Onclick。

按钮代码如下。

<input type="submit" value="Add to form" class="btn btn-primary" ng-click="addToFormID($index)" />

但是如果添加4个组件就会有很多按钮就会出现4个按钮来生成公式。

这是我的TextArea代码:

 <textarea id="summarFormula" ng-model=".Summarisation" ng-change="setSummarisationFormulaDynamic()" cols="100" rows="4"></textarea>

这是我的剧本。

    $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();
    }

我们可以看到在其他部分$ scope.vm.SummarisationForm + =所以它将+前一个的下一个公式,所以我想修改这个,并需要添加我保持光标的内容。

现在我点击它是将它添加到内容的末尾,如果输入enter键将光标保持在下一行的第一行,它也将它添加到已经文本在那里的同一行所以我想要找到光标位置并在文本中插入准确保持光标或输入输入键位置的文本。

我对角度js很新,所以请用按钮帮助我基本的想法如何实现和脚本修改我该怎么做呢。

编辑:它是ASP.NET MVC5 Applicaiton。

如果您需要更多详细信息,请告知我们。

提前感谢所有人。

1 个答案:

答案 0 :(得分:5)

这是我的问题得到解决的英雄。谁解决了我的问题真的很棒。

我究竟做了什么是我在这个链接中提到的指令元素,并在我的视图中调用了该指令。

繁荣起作用。

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();
                }
            });
        }
    }
}]);

查看这样的来电,

指令名称是myText。