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");
}

然后我用粗体“仓库”替换原来的“仓库”：

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

我所做的就是传递我的刺痛并首先检查我想要更改的单词是否存在，如果没有，我将直接传递字符串。一旦我知道这个词在那里，我只需用粗体替换同一个词。

 $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 2

我会这样尝试的，

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 3

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

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

$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;
    };
});

希望这对你真的有帮助。

编码愉快。 :)

Answer 4

from this answer

您需要告诉 Angular 将结果视为 html。为此，您需要包含 ngSanitize 作为模块依赖项并使用 ng-bind-html 插入结果。

所以html看起来像

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

还有角部分

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

Answer 5

使用 ng-bind-html 将字符串呈现为 html 内容。在您的情况下，请在 HTML 页面上使用以下内容：

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

Answer 6

你应该使用$sce服务：

JS：

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

HTML：

{{trustedHtml}}