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

Question

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

例如，如果我输入：“你好，你好吗？”

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

Angular 有没有办法实现这个？

Answer 1

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

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

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

请注意，它不会更改 ngModel 本身的值，而是通过使用自定义指令 (bold-render).

Answer 2

为此，您必须用 <b>Word</b> 替换要加粗的字词，你在你的控制器中这样做：

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

并在模板中

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

*我用正则表达式替换了单词，</code>是匹配的单词</p> <p>*<code>ng-bind-html 指令呈现为 HTML 而不是 纯文本 ，这是 AngularJS 的一种安全性，它不'让你直接把HTML放在{{ formattedText }}

Angular: add HTML markup to string depending on keyboard input