Question

如何更改表格单元格文本中特定图案的颜色？

示例 -

 <td>In JSON payload #/end_reason received Values 'normal' , but expected Values -- background, opt_out_tel . ERROR COUNT - 20<td>

我需要将模式#/< value>更改为不同的颜色。

我尝试在控制器中使用#/< value>替换模式<span style='color: rgba(220, 0, 0, 1)'> #/< value> </span>的jQuery方法，但AngularJS正在渲染文字字符串而不是更改颜色。

Answer 1

要获得预期结果，请使用以下选项查找模式并使用背景红色突出显示

HTML：

<body>

  <div ng-app="myApp" ng-controller="customersCtrl">

    <table>
      <tr>
        <td ng-model="change" ng-click="word()">In JSON payload #/end_reason received Values 'normal' , but expected Values -- background, opt_out_tel . ERROR COUNT - 20
          <td>
      </tr>
    </table>

  </div>


</body>

</html>

CSS：

table tr td{
  border:1px solid black
}

.changeColor{
 background:green; 
}


.highlight
{
background:red;
}

JS：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

  var tdVal = angular.element(document).find('TD')[0];
  var x = tdVal.innerHTML;
  var text = '#/end_reason';
  var index = x.indexOf(text);
  if (index >= 0) {
    tdVal.innerHTML = x.substring(0, index) + "<span class='highlight'>" + x.substring(index, index + text.length) + "</span>" + x.substring(index + text.length);
    console.log(x);

  }

});

Codepen- http://codepen.io/nagasai/pen/dXvMwb

如何使用AngularJS将颜色更改为表格单元格中的特定单词

1 个答案: