在发布和重用值后，在文本区域中显示用换行符分隔的值

Posted 2023-05-07

【中文标题】在发布和重用值后，在文本区域中显示用换行符分隔的值

【英文标题】：Display values in textarea separated with newline after post and reuse of values

【发布时间】：2015-09-05 04:32:38

【问题描述】：

我在 MVC、ASP.NET 中有一个使用 angularjs 的解决方案，可以将值输入到文本区域并将它们发布到服务器。我可以使用 ng-model 从服务器接收值并在视图的文本区域中显示它们。但我不确定如何通过换行符显示它们然后重复使用它们（立即重新发布它们）。

1) 首先，用户可以在文本区域中输入值并通过 Return 按钮将它们拆分。这是由ng-list="/\n/"完成的：

<textarea rows="10" cols="80" id="autoGenerateInputField" ng-model="fighterList" ng-list="/\n/" />

2) 然后我通过 angularJS 发布这些值并将它们保存在我的数据库中。

3) 我现在可以从 JSON 中获取这些值。我将它们转换为列表并使用 angularJS 将它们放入 fighterList：

$scope.refreshListTournamentTree = function (CategoryId) 
        var serviceUrl = "/api/Match" + (CategoryId ? "/" + CategoryId : "");
        $http(
            method: 'GET',
            url: serviceUrl
        ).success(function (data, status, headers, config) 
            $scope.treeGenerated = data.length;
            $scope.totalMatches = data;
            var listOfFighters = [];
            if (data.length > 0) 
                $scope.finalMatch = [buildHierarchy(data)[0]];
                for (var i = 0; data.length > i; i++)
                    fighter1 = data[i].Fighter1;
                    fighter2 = data[i].Fighter2;
                    listOfFighters.push(fighter1);
                    listOfFighters.push(fighter2);
                
            
            else 
                $scope.finalMatch = [];
            
            $scope.fighterList = listOfFighters;
            $scope.loading = false;
        ).error(function (data, status, headers, config) 
      );

    

现在列表显示在文本区域中，但值由“，”分隔，而不是换行。我创建了一个 Fiddle，它显示了我的问题的简化版本：

http://jsfiddle.net/Jtf3M/256/

所以我的问题是：如何在用换行符分隔的文本区域中显示来自 fighterList 的值，以便我可以重用这些值？

【问题讨论】：

也许这个问题对你的问题有答案：***.com/questions/26450445/…

我尝试了这个解决方案，但使用 ng-list="
" 它用“\”拆分值：["1\2\3"] 而我需要：["1","2","3"] 将其发布到服务器。 ng-list="
" 也不显示用换行符分隔的值。

您可以尝试遍历数组中的值并在每个条目中添加'\n'？

【参考方案1】：

您不能简单地添加一个join 吗？ 请参阅更新的小提琴：http://jsfiddle.net/Jtf3M/261/

请查看使用过滤器和 ng-init 的替代方法：http://jsfiddle.net/7516qere/

【讨论】：

这会按照我的要求显示，但我无法重用这些值，因为现在的输出是 1 2 3 而不是数组：["1","2","3"]。我想应该可以将其转换为字符串数组？

您可以使用split 转换回数组，例如：$scope.fighterList.split('\n')

完美。输出上的连接和输入上的拆分的组合起到了作用。谢谢米歇尔姆！