Angular：根据键盘输入将HTML标记添加到字符串

Question

我有一个输入字段，我想在输入输入字段时将输入打印到屏幕上。但是，我想扫描输入文本，打印某些粗体字。

例如，如果我打字：＆＃34; 你好，你好吗？＆＃34;

我希望它在输入字段下打印，但 Hello 必须以粗体显示： 您好 你好吗？

Angular有没有办法实现这一目标？

Answer 1

要做到这一点，你必须用<b>Word</b>替换你想要加粗的单词， 你在控制器中做到了这一点：

$scope.$watch('textInput', function(){
  $scope.formattedText = $scope.textInput.replace(/(Hello|SomeWord|OtherWord)/ig, "<b>$1</b>");
});

在模板中

<div ng-bind-html="formattedText"></div>

*我使用Regex替换单词，$1是匹配的单词

* ng-bind-html指令要呈现为HTML而不是纯文本，它是AngularJS的一种安全性，它不允许您直接将HTML放入{{1} }

Answer 2

是。您可以使用NgModelController（创建指令并使用require属性来访问此控制器）来实现它。

Here is a nice example拦截输入并在渲染之前通过在所需控制器上实现$render方法来更改它。

将输入文本呈现为粗体的另一个示例：http://jsbin.com/moxosorola/1/edit

请注意，它不会更改ngModel本身的值，而是使用自定义指令（{{1}）以您希望显示它的方式呈现它（相同的ngModel） }）。