Question

您好我正在研究一个示例来显示文本区域中的值，下面是plunkr的链接： http://plnkr.co/edit/QgWKTRsC6TBeqbFf80fO?p=preview

<!DOCTYPE html>
<html>

<head>
     <script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" 
type="text/javascript"></script>
     <script src="script.js"></script>
</head>

   <body ng-app="testApp" ng-controller="testController">
   <textarea ng-model="stringArray" ng-list="&#10;" ng-trim="false" 
   rows="10"> 
   </textarea>

  <div>
     {{stringArray}}
  </div>
 </body>

 </html>

//代码在这里

 var testApp = angular.module('testApp', []);

 testApp.controller('testController', function ($scope)
 {
      $scope.stringArray =
      [
       "First String",
       "Second String",
       "Third String"
      ];
   });

现在我想知道如何从测试区域中获取所选值。如果我从文本区域中选择First String值，我应该只看到输出中的First String值。

Answer 1

使用window.getSelection().toString()，这将提供所选文本，另请注意，单独的$ scope变量用于显示文本，因为使用stringArray将替换原始内容。

在这种情况下使用ng-mouseup事件

var testApp = angular.module('testApp', []);

testApp.controller('testController', function($scope) {
  $scope.stringArray = [
    "First String",
    "Second String",
    "Third String"
  ];


  $scope.getSelectedText = function() {
    $scope.selectedTextDisplay = window.getSelection().toString();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testController">
  <textarea ng-mouseup='getSelectedText()' ng-model="stringArray" ng-list="&#10;" ng-trim="false" rows="10"></textarea>

  <div>
    {{selectedTextDisplay}}
  </div>
</body>

如何从angularjs中的textarea中获取所选值

1 个答案: