Question

我有一个清单：

$scope.list = ["test/test1/test2/test3","test3/test5/test6"];

我希望在显示列表时将粗体样式应用于/字符：

<div ng-repeat="path in list">
   <p style="font-weight:bold">{{path}}</p>
</div>

你有什么想法我怎么能实现这个目标？

Fiddle

Answer 1

您只需使用str.replace http://jsfiddle.net/k18vgtvw/

即可

 <p style="font-weight:bold" ng-bind-html-unsafe="csc(path)"></p>

控制器

  $scope.csc = function(path) {
    return path.replace(/\//g, "<span style='color:red'>/</span>");
  }

Answer 2

有很多方法可以做到这一点。首先，我向控制器添加一个函数，假设它叫做boldSlashes。

function boldSlashes(path) {
     return path.replace("/","<b>/</b>")
}

然后将您的html更改为：

<div ng-repeat="path in list" ng-bind-html>
   boldSlashes({{path}})
</div>

ng-bind-html告诉angular将内容视为html而不是逃避它。

您还必须将ngSanitize注入您的模块才能使用ng-bind-html。

因此，无论您在何处创建模块，都要将ngSanitize添加到依赖项中，如：

angular.module（ '对myApp'，[ngSanitize]）

Answer 3

我不确定这是不是你想要做的事情，但我把各个元素分开了。 jsfiddle字体的粗体字体在/字符上看起来完全相同。

http://jsfiddle.net/3a2duqg4/ 1.将视图更新为列表 2.更改数组以使每个部分具有单独的项目 3.为＆＃34; /＆＃34;添加了样式;并且用小提琴默认字体实现了字体粗体属性并没有任何不同。

<div ng-controller="MyCtrl">
    <ul>
        <li class="list" ng-repeat="path in list">{{path}} <span>/</span></li>
    </ul>
</div>

将项目添加到列表而不是段落并添加了一些样式。我更新了你的数组，每个数组项也有一个值。

如果这有帮助，请告诉我！：）

Answer 4

＆＃13;

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.list = ["test/test1/test2/test3","test3/test5/test6"];
    $scope.updateString = function(s) {
    	return s.replace(/\//g, '<span class="bold">/</span>');
    };
}

＆＃13;

.bold {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="path in list">
      <p ng-bind-html-unsafe="updateString(path)"></p>
    </div>
  </div>
</div>

＆＃13;

Angularjs：将粗体样式应用于ng-repeat内的字符

4 个答案: