Question

我的疑问很简单。如何更换，角度滤波器中的断线。我还添加了演示jsfFiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

demo

在上面的链接中，会有表格。在ID列中，最后一行包含2个值，这些值存在于json内的数组中。现在没有逗号（，）可用于换行。

请分享您的知识。

Answer 1

您在模块级别使用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 。

ng-bind-html指令 Documentation

PS：确保注入清洁剂，或者您可以使用不同的技术。

Angularjs：如何用角度过滤器中的换行符替换

1 个答案: