Display values in textarea separated with newline after post and reuse of values

Question

I have a solution in MVC, ASP.NET with the use of angularjs, where it is possible to input values into a textarea and post them to a server. I can receive the values from the server and show them in the textarea in the view by using ng-model. But I am unsure of how to display them by newline and to then reuse them (re-post them right away).

1) First of all the user is able to input values in the textarea and split them by the Return button. This is done by ng-list="/\n/":

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

2) I then post these values through angularJS and saves them in my database.

3) I can now get these values from a JSON. I convert them into a list and puts them into the fighterList using angularJS:

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

    }

Now the list is shown in the textarea but the values are separated by "," and not with a new line. I have created a Fiddle that shows a simplyfied version of my question:

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

So to my question: How do I display the values from the fighterList in the textarea separated with newline and so that I can reuse the values?

Answer 1

Can't you simply add a join? Please see the fiddle updated: http://jsfiddle.net/Jtf3M/261/

Please look also at this alternative way using a filter and ng-init: http://jsfiddle.net/7516qere/