textarea中的AngularJS格式数组值

I have a angularJS application, in which I have an array.

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

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

and a text area

和文本区域

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

I can see the that textarea contains values x1, x2 (separated by comma). I want to show the values on separate lines. Meaning all array values should be separated by new line character not by comma. Do I need to write filter for this?

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

3 个解决方案

#1

You can write a directive that modifies how ng-model converts variables into input values and back. I'm just writing this off the top of my head, so I have no idea if it's exactly right, but something like this might do it:

您可以编写一个指令来修改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);
        }
    };
});

And you can use it like this:

你可以像这样使用它：

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

#2

This is exactly what ng-list does:

这正是ng-list的作用：

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

This also works on all other kinds of inputs as it hooks into ngModels parsers/formatters.

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

See this fiddle: http://jsfiddle.net/xbYzT/1/

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

The problem with this is that ng-list always joins with a ',' as the separator, so it's not really bi-directional.

这个问题是ng-list总是以'，'作为分隔符加入，所以它不是真正的双向。

#3

A much easier way to do this in Angular >= 1.3 which works both ways:

在Angular> = 1.3中执行此操作的更简单的方法是两种方式：

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

Plunker

Plunker

#1

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);
        }
    };
});