Angularjs突出显示文字

Question

我有一个AngularJS应用程序，显示突出显示的文本列表。

$membership_id = membership plan id.

$expiring_txn = MeprUser::get_user_product_expires_at_date($current_user->ID, $membership_id, true); 

if(!empty($expiring_txn)){

echo $created_at = MeprAppHelper::format_date($expiring_txn->created_at, _x('Never', 'ui', 'memberpress'));

echo $expires_at = MeprAppHelper::format_date($expiring_txn->expires_at, _x('Never', 'ui', 'memberpress'));

}

这是HTML：

app.controller('textctrl', function($scope) {
    $scope.showSelectedText = function() {
        $scope.selectedText =  $scope.getSelectionText();
    };

    $scope.text = [];

    $scope.getSelectionText = function() {
      var item = "";
      if (window.getSelection && window.getSelection().toString() != '') {
          item = window.getSelection().toString();
          $scope.text.push(item);

          console.log($scope.text)
      } else if (document.selection && document.selection.type != "Control") {
          text = document.selection.createRange().text;
      }
      return $scope.text;
    };
});

每当突出显示文字时，它会显示在最后一个<div ng-controller="textctrl"> <div class="form-group" style="width:60%;display: inline-table;height: 70%;" > <p style="padding: 3%; border:1px solid black" ng-mouseup="showSelectedText()"> Literature, in its broadest sense, is any single body of written works. More restrictively, literature is writing that is considered to be an art form, or any single writing deemed to have artistic or intellectual value, often due to deploying language in ways that differ from ordinary usage. </p> </div> <div class="side-container" style="width:35%;display: inline-table;height: 70%;border:1px solid black;"> <p>Hi</p> </div> <h2> Selected Text </h2> <!--<p ng-bind="selectedText"></p>--> <p ng-repeat="item in text track by $index">{$ $index $} - {$ item $}</p> </div> 标记中，我希望在<p>标记的原始文本实例中突出显示相同的文字。我不确定解决这个问题的最佳方法是什么或需要指令。