AngularJS中如何获取textarea的选中值？附示例代码与Plunkr链接

嘿，我知道你现在需要在AngularJS里获取textarea的选中内容，结合你用ng-list绑定数组的场景，这里有两种实用的方法，推荐你用第一种（更符合Angular的设计思想）：

方法一：自定义指令（推荐） #

这种方式把选中逻辑封装成指令，和控制器解耦，复用性更强，也符合Angular的数据驱动理念。

完整代码示例 #

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="testApp" ng-controller="testController">
  <!-- 绑定自定义指令和选中内容的变量 -->
  <textarea ng-model="stringArray" ng-list="&#10;" 
            text-selection selected-text="selectedContent"></textarea>
  
  <!-- 实时显示选中的内容 -->
  <p>当前选中的内容：<strong>{{selectedContent}}</strong></p>
</body>
</html>

JavaScript（script.js）部分：

angular.module('testApp', [])
.controller('testController', function($scope) {
  // 初始化你的数组数据
  $scope.stringArray = ['第一行内容', '第二行内容', '第三行内容'];
})
// 自定义指令：监听textarea的选中事件
.directive('textSelection', function() {
  return {
    // 双向绑定选中内容到父作用域的变量
    scope: {
      selectedText: '='
    },
    link: function(scope, element) {
      // 监听鼠标松开和键盘按键事件（覆盖所有选中场景）
      element.on('mouseup keyup', function() {
        var textareaEl = element[0];
        // 获取选中的起止位置
        var startPos = textareaEl.selectionStart;
        var endPos = textareaEl.selectionEnd;
        // 截取选中的文本
        scope.selectedText = textareaEl.value.substring(startPos, endPos);
        // 因为是在原生DOM事件里，手动触发Angular的脏检查更新视图
        scope.$apply();
      });
    }
  };
});

原理说明 #

• 指令绑定了textarea的mouseup和keyup事件，不管是用鼠标拖拽选中还是键盘Shift+方向键选中，都能触发。
• 通过textarea原生的selectionStart和selectionEnd属性，精准获取选中文本的起止索引，再截取对应内容。
• 最后用scope.$apply()告诉Angular更新视图，确保选中内容能实时显示。

方法二：控制器直接操作DOM（适合简单场景） #

如果你的需求很简单，也可以直接在控制器里获取textarea元素来获取选中内容，但这种方式会让控制器和DOM耦合，不推荐在复杂应用里使用。

代码示例 #

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="testApp" ng-controller="testController">
  <textarea ng-model="stringArray" ng-list="&#10;" id="myTextarea"></textarea>
  
  <button ng-click="getSelectedText()">点击获取选中内容</button>
  <p>选中的内容：{{selectedContent}}</p>
</body>
</html>

JavaScript部分：

angular.module('testApp', [])
.controller('testController', function($scope) {
  $scope.stringArray = ['第一行内容', '第二行内容', '第三行内容'];
  
  $scope.getSelectedText = function() {
    var textareaEl = document.getElementById('myTextarea');
    var start = textareaEl.selectionStart;
    var end = textareaEl.selectionEnd;
    $scope.selectedContent = textareaEl.value.substring(start, end);
  };
});

内容的提问来源于stack exchange，提问作者GrailsLearner