angularjs - AngularJS在textarea中格式化数组值

Question

我有一个 angularJS 应用程序，其中有一个数组。

  $scope.data[0] =  x1;
  $scope.data[1] =  x2;

和一个文本区域

  <textarea ng-model="data"> </textarea>

我可以看到 textarea 包含值 x1、x2（用逗号分隔）。我想在单独的行上显示值。这意味着所有数组值都应该用换行符而不是逗号分隔。我需要为此编写过滤器吗？

Answer 1

这正是这样ng-list做的：

<textarea ng-model="someArray" ng-list="/\n/"></textarea>

这也适用于所有其他类型的输入，因为它连接到 ngModels 解析器/格式化程序。

看到这个小提琴：http: //jsfiddle.net/xbYzT/1/

这样做的问题是 ng-list 总是以“，”作为分隔符加入，所以它并不是真正的双向。

Answer 2

在Angular >= 1.3中执行此操作的一种更简单的方法，它可以双向工作：

<textarea ng-model="yourStringArray" ng-list="&#10;" ng-trim="false"></textarea>

普朗克

Answer 3

您可以编写一个指令来修改 ng-model 如何将变量转换为输入值并返回。我只是在脑海中写下这个，所以我不知道它是否完全正确，但这样的事情可能会做到：

app.directive('splitArray', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            function fromUser(text) {
                return text.split("\n");
            }

            function toUser(array) {                        
                return array.join("\n");
            }

            ngModel.$parsers.push(fromUser);
            ngModel.$formatters.push(toUser);
        }
    };
});

你可以像这样使用它：

  <textarea ng-model="data" split-array> </textarea>