Angularjs: как заменить, с разрывом линии <br> в угловом фильтре

Мои сомнения просты. Как заменить, с разрывом линии в угловом фильтре. я также добавил демонстрационный jsfFiddleAngularjs: как заменить, с разрывом линии <br> в угловом фильтре

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

В приведенной выше ссылке, там будет таблица. В столбце ID последней строки содержатся 2 значения, которые присутствуют в массиве внутри json. Теперь вместо запятой (,) существует какой-либо возможный способ разрыва строки.

Поделись своими знаниями.

источник

2016-12-10 vignesh selvarathinam

Вы не можете сделать опору id в JSON для массива. Попробуйте это http://jsfiddle.net/mhenmqcg/13/, он должен работать. –

вы используете ng-bind-html с инъекцией sanitize на уровне модуля.

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>

код:

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

работает образец для захватов here.

нг-связывать-HTML директива Documentation

PS: убедитесь, что Вы вводите Sanitize или вы можете использовать различную Методику.

источник

2016-12-10 14:38:59

много просто ... спасибо @supercool –

Angularjs: как заменить, с разрывом линии <br> в угловом фильтре

ответ

Смежные вопросы