Angularjs: how to replace , with line break<br> in angular filter

My doubt is simple. How to replace , with line break in angular filter. i also added the demo jsfFiddle

    angular
      .module('myApp', [])
      .filter('nicelist', function() {
        return function(input) {
          if (input instanceof Array) {
            return input.join(",");
          }
          return input;
        }
      })
      .controller('ctrl', function($scope) {
        $scope.todolists = [{
          "id": "id_584",
          "customer_id": 2,
          "url": "url",
          "bill_number": "123",
          "location": "from_location"
        }, {
          "id": "id_122",
          "customer_id": 3,
          "url": "url",
          "bill_number": "123",
          "location": "from_location"
        }, {
          "id": "id_128",
          "customer_id": 4,
          "url": "url",
          "bill_number": "123",
          "location": "from_location"
        }, {
          "id": "id_805",
          "customer_id": 5,
          "url": "url",
          "bill_number": "123",
          "location": "from_location"
        }, {
          "id": "id_588",
          "customer_id": 6,
          "url": "url",
          "bill_number": "123",
          "location": "from_location"
        }, {
          "id": ["id_115"," id_114"],
          "customer_id": 7,
          "url": "url",
          "bill_number": "123",
          "location": "from_location"
        }]

      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
  <table class="table table-hover tr-table transactions" style="width: 100%;">
    <thead>
      <tr class="search-row pending-orders table-header-row-height tr-table-head">
        <th>ID</th>
        <th>Bill Number</th>
        <th>Location</th>
        <th>Url</th>

      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="todolist in todolists">
        <td>{{todolist.id | nicelist }}</td>
        <td>{{todolist.bill_number}}</td>
        <td>{{todolist.location}}</td>
        <td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>

      </tr>
    </tbody>
  </table>
</body>

demo

In the above link, there will be table. In ID column last row contain 2 values which is present in array inside the json. Now instead of comma(,) is there any possible way for line break.

Please share your knowledge.

Solution

you use ng-bind-html with injecting sanitize at module level .

html:

<tbody>
  <tr ng-repeat="todolist in todolists">
    <td ng-bind-html="todolist.id | nicelist"></td>
    <td>{{todolist.bill_number}}</td>
    <td>{{todolist.location}}</td>
    <td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
  </tr>
</tbody>

code:

angular.module('myApp', ['ngSanitize']) //Inject here
       .filter('nicelist', function() {
        return function(input) {
          if (input instanceof Array) {
            return input.join("<br>");
          }
       return input;
     }
 })

working sample up for grabs here.

ng-bind-html directive Documentation

PS: make sure you inject sanitize or you can use different techiques .