Question

这是一个简单的示例，说明我尝试将其置于角度应用中。我有一个textarea，其文本将输出到页面的另一部分，如果在textarea中生成换行符，我也希望转移它们。我已经尝试了给出here给出的答案，但是这个案例并没有使用棱角分明，而且似乎并没有为我工作（我尝试使用{{sometext.replace(/\n/g, "<br />")}}但是只是打破了表达式，只是将表达式显示为带花括号的字符串和所有。如何解决这个问题？

＆＃13;

var app = angular.module('SomeApp', []);

app.controller('SomeController', function($scope){
  $scope.sometext = "Some text\nMore text";
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='SomeApp'>
  
  <div ng-controller='SomeController'>  

    <textarea ng-model='sometext' rows='8' cols='25'></textarea>

    <p>{{sometext}}</p>
  
  </div>

</body>

＆＃13;

Answer 1

<强> DEMO

上面的代码中存在两个问题：

您正试图在html页面中将\n渲染为新行，html并未将其识别为html。

要解决此问题，您必须在渲染时通过创建过滤器替换字符串中的所有\n。下面的过滤器使用正则表达式和值对的数组来替换要渲染的字符串。

<强> JAVASCRIPT

  .value('HTMLIZE_CONVERSIONS', [
    { expr: /\n+?/g, value: '<br>' }
  ])

  .filter('htmlize', function(HTMLIZE_CONVERSIONS) {
    return function(string) {
      return HTMLIZE_CONVERSIONS.reduce(function(result, conversion) {
        return result.replace(conversion.expr, conversion.value);
      }, string || '');
    };
  });

第二个问题是过滤器不足以呈现html。不要通过{{}}插入字符串本身，而是使用 ng-bind-html ，因为它旨在将字符串呈现为html。此外，您必须包含 ngSanitize 模块，ng-bind-html才能正常呈现html。

<强> HTML

<p ng-bind-html="someText | htmlize"></p>

注意

您可以在HTMLIZE_CONVERSIONS数组中添加更多表达式和值对。

Answer 2

left -> right public class FunctionalInterfaceDemo { public static class SimpleClass { public static void doItStatic() { } public void doItNonStatic() { } } interface MyOwnFunctionalInterface { void methodA(); } interface NotAFunctionalInterface { void methodA(); void methodB(); } interface AlsoNotAFunctionalInterface { default void methodA() { } } public static void main(String[] args) { MyOwnFunctionalInterface compiles = SimpleClass::doItStatic; MyOwnFunctionalInterface alsoCompiles = new SimpleClass()::doItNonStatic; NotAFunctionalInterface doesNotCompile = SimpleClass::doItStatic; AlsoNotAFunctionalInterface alsoDoesNotCompile = SimpleClass::doItStatic; }

这个适用于Angular 8。

Answer 3

您可以使用另一个textarea而不是p

<textarea ng-model="sometext"> "you can type your input here"</textarea>

<textarea readonly> {{sometext}} </textarea>

第一行获取输入，而第二行只显示输入

Answer 4

.filter('nl2br', function ($sce) {
        return function (msg, is_xhtml) {
            var is_xhtml = is_xhtml || true;
            var breakTag = (is_xhtml) ? '<br />' : '<br>';
            var msg = (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
            return $sce.trustAsHtml(msg);
        }
    });

Answer 5

试试这个：

var app = angular.module('SomeApp', []);

app.controller('SomeController', function($scope){
   $scope.sometext = "Some text\nMore text";
   $scope.sometext = $scope.sometext.replace(/\n/g, "<br />")
});

Answer 6

<p ng-bind-html="someText | nl2br"></p>

.filter（'nl2br'，function（$ sce）{

        return function (msg, is_xhtml) {

            var is_xhtml = is_xhtml || true;

            var breakTag = (is_xhtml) ? '<br />' : '<br>';

            var msg = (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');

            return $sce.trustAsHtml(msg);

        }

    });

如何让textarea识别AngularJS中的新行？

6 个答案: