javascript - Angular ng-repeat <li> 字符串换行

Question

查看:

<li ng-repeat='msg in msgs'>{{msg}}</li>

Controller :

msgs=['abc','a
             b
             v', '123']

msgs.push('Something input from textarea, maybe has line feed')

想要:

• abc
• a
  b
  v
• 123

但是结果换行消失了

• abc
• a b v
• 123

尝试解决

try refactoring < li> label to <myli>

app.directive('myli', function ($rootScope) {
    return {
        restrict: 'E',
        replace: true,
        template: "<li></li>",
        link: function(scope, element, attr) {
            element.append(scope.msg);
        }
    }
});

但这不是我想要的，它只是改变初始数据。

如果我用换行符将某些内容推送到消息，换行符将更改为空格。

帮帮我

Answer 1

使用 CSS white-space属性...

angular.module('so', []).run(function($rootScope) {
  $rootScope.msgs = ['abc', `a
             b
             v`, '123'];

  $rootScope.msgs.push('Something input from textarea, maybe has line feed')
});

li {
  white-space: pre-line;
}

<ul ng-app="so">
  <li ng-repeat="msg in msgs">{{msg}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>