AngularJS:以粗体显示表达式的一部分

Question

我的目标是使有棱角的表达式的一部分加粗。

基本上，我取一个对象obj，并将其转换为字符串str。

obj = $scope.gridOptions1.api.getFilterModel();
     for (var propt in obj) {
         str += (" " + propt + ': ' + obj[propt]);
     }

然后，我需要在该对象中找到一个特定的单词，例如"Depot"。我用的是str.indexOf("Depot")。我将其设置为变量d:

for (i = 0; i < str.length; i++) {
             var d = str.indexOf("Depot");
}

然后将原来的"Depot"替换为加粗的"Depot":

if (d !== -1 ) {
             var depot = str.substring(d, d + 5);
             finalString = str.replace(depot, depot.bold());
         }

然后我将字符串触发到作用域:

$scope.getFiltered = finalString;

.bold()方法只是返回在我的UI中"Depot"周围带有粗体标记的字符串。

所以我认为字符串不被认为是HTML，还有别的办法吗?

Answer 1

from this answer

你需要告诉angular把结果当作html。为了做到这一点，你需要将ngSanitize作为一个模块依赖项，并使用ng-bind-html插入结果。

所以html看起来像

 <p ng-bind-html="htmlString"></p>

和角度部分

angular.module('app', ['ngSanitize'])

Answer 2

使用ng-bind-html将字符串呈现为html内容。在您的例子中，在HTML页面上使用下面的代码:

<p ng-bind-html="getFiltered"></p>

Answer 3

我本来会这么做的，

var myApp = angular.module('myApp',[]);
myApp.directive('wrapInTag', function() {
	return {
        restrict: 'A',
        link: function(scope, elm, attr) {
          var tag = attr.tag || 'strong';
          var words = eval(attr.words) || [];
          var text = scope.myText;
          
           for(var i=0; i< words.length; i++) {
              text =  text.replace(words[i],'<'+tag+'>'+words[i]+'</'+tag+'>');
            }             
            elm.html(text);
        }
    }
});
 myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.myText = 'Hello, Here you will find your word in bold';
    $scope.words = ['Hello','your','bold'];
 }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
    <div wrap-in-tag words="{{words}}">{{myText}}! </div>
</div>
  </body>

见http://codepen.io/anon/pen/YyNdbO

Answer 4

我所做的是传递我的字符串，首先检查我想要改变的单词是否在那里，如果不是，我就直接传递字符串。一旦我知道这个单词在那里，我就把它替换为相同的黑体单词。

 $scope.makeBold = function(item) {
        if(item.indexOf("LookForMe") != -1)
        {
            b = "LookForMe";
            var d = item.replace(b,b.bold());
            return '<div>'+d+'</div>';
        }
        else {
            return '<div>'+item+'</div>';
        }
    };

我的控制器是这样的:

var app = angular.module('myApp', ['ngSanitize'],function(){});

在HTML中:

<div ng-bind-html="makeBold(stringToChange)"></div>

Answer 5

您应该使用$sce服务:

JS:

$scope.getFiltered = '<strong>render me as HTML</strong>';
$scope.trustedHtml = $sce.trustAsHtml($scope.getFiltered);

HTML:

{{trustedHtml}}

Answer 6

我已经在我的自定义过滤器的帮助下实现了这一点。

我可以分享我的方法。您可以使用此代码或使用逻辑。

$scope.data = [
                { value: "1", bold: false },
                { value: "2", bold: false },
                { value: "3", bold: false },
                { value: "4", bold: false },
                { value: "5", bold: false },
                { value: "6", bold: false }
            ];

这是我的数据。实际上我想在1 2 3 4中显示和搜索。为此，我为每个值添加了一个属性bold。

这是我的html，同样的，

<input type="text" ng-model="search" />
<p ng-repeat="a in data | myFilter : search">
    <b ng-show="a.bold"> {{a.value}} </b>
    <span ng-hide="a.bold">{{a.value}}</span>
</p>

这是我的自定义滤镜，

app.filter("myFilter", function () {
    return function (input, search) {
        angular.forEach(input, function (value, index) {
            if ( value.value == search) {
                value.bold = true;
            }
            else
            {
                value.bold = false;
            }
        });
        return input;
    };
});

希望这对你有帮助。

幸福的鳕鱼。:)