首页 > 解决方案 > angularjs-高亮文本成段落

问题描述

我是角度 js 的新手。所以,我想突出显示 HTML 中的某些文本。

HTML 代码:

                    <div class="form-label logs-wrap" ng-repeat="x in res track by $index" ng-click="getBookingLog(x.bookingDBID)" ng-class="{selected: x.bookingDBID === bookingDBID}">

                      <span class="form-label">{{x.xml}}</span>
                    </div>
                  </div>

我的 CSS(仅选定的类):

.selected {
  background-color: red;
}

角码:

$scope.bookingDBID = null;
    $scope.getBookingLog = function(bookingDBID){
      $scope.book = {};
      $scope.book.PID = $stateParams.id;
      $scope.book.bookingDBID = bookingDBID;

      $scope.showloader=true;
      var Indata ='data='+angular.toJson($scope.book)+'&method=getBookingLog&service=bookings';
      $http({
         method: 'POST',
         url: 'sl/service/middleservice.php',
         headers: {'Content-Type': 'application/x-www-form-urlencoded'},
         data: Indata
         }).success(function (response) {
            // console.log(response);

            $scope.showloader=false;
            if(response == 'noSession')
            {
              location.href = 'login.php';
            }else
            {
              if(response)
              {
                $scope.res = response.reverse();              
                $scope.cnt = $scope.res.length;
              }
              $scope.loadingdiv= false;
              $scope.$modalInstance1 = $modal.open({
                  scope: $scope,
                  templateUrl: "bookinglog.html",
                  size: 'lg1',
              });
            }
       });

    }

我想在 Angular js 中突出显示一个bookingDBID,但没有突出显示任何文本。

在此处输入图像描述

我想在图像中突出显示 152422082503328306779

reservation_notif_id=bookingDBID 结果存储

任何有任何想法的人都请帮助解决。谢谢

标签: angularjsangularjs-ng-repeat

解决方案


检查这个 plunkr

你可以有

xmlTransform = function(data) {
    var x2js = new X2JS();
    var json = x2js.xml_str2json( data );
    return json.guitars.guitar;
};

$http.get('guitars.xml', {transformResponse:xmlTransform}).
            success(function(data, status) {
                 $scope.dataSet = data;
            }).
            error(function(data, status) {
                console.log("Request failed " + status);
            });

并且在html

<div ng-controller="AppController" >
 <ul>
    <li ng-repeat="guitar in dataSet">
       <div class="selected"> {{guitar.model}} </div> <!-- HERE YOU HAVE HIGHLIGHTED -->
       <div>{{guitar.introyear}}</div>
    </li>
  </ul>
</div>

推荐阅读