Question

我的目标是使角色表达的一部分变得粗体。

所以基本上我是在拍摄对象obj，并将其转换为字符串str。

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

然后我需要在该对象中找到一个特定的单词，例如＆＃34; Depot＆＃34;。我是使用str.indexOf("Depot")执行此操作的。我将其设置为变量d：

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

然后我更换了原装＆＃34;仓库＆＃34;使用BOLD＆＃34; Depot＆＃34;：

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

然后我将我的弦发射到范围：

$scope.getFiltered = finalString;

.bold（）方法只是返回带有粗体标签的字符串＆＃34; Depot＆＃34;在我的用户界面。

所以我认为字符串不是HTML，还有另外一种方法吗？

Answer 1

from this answer

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

所以html看起来像

$('.required', this.form).each(function() {
    ...
};

和角度部分

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

Answer 2

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

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

Answer 3

我会以这种方式尝试，

＆＃13;

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'];
 }]);

＆＃13;

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

＆＃13;

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

工作

Answer 4

您应该使用function JobsCtrl($scope, MyService) { var currentTab = MyService.getCurrentTab(); alert(currentTab.label); }服务：

JS：

$sce

HTML：

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

Answer 5

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

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

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

我做到这一点的目的是通过我的刺痛并首先检查我想改变的词是否存在，如果不是，我只是按原样传递字符串。一旦我知道这个词在那里，我就用粗体替换同一个词。

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

AngularJS：以粗体

6 个答案: