Angularjs：どのように置き換えるか、角括弧内の<br>

疑問は簡単です。交換する方法、角度フィルタの改行方法。私はまた、テーブルが存在するであろう、上記のリンクでAngularjs：どのように置き換えるか、角括弧内の<br>

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>

デモを追加しました。 ID列の最後の行には、json内部の配列に存在する2つの値が含まれています。カンマ（、）の代わりに、改行の方法があります。

知識を共有してください。

出典

2016-12-10 vignesh selvarathinam

JSONで 'id' propを配列にすることはできません。これを試してくださいhttp://jsfiddle.net/mhenmqcg/13/それは動作するはずです。 –

あなたはsanitizeをモジュールレベルで注入してng-bind-htmlを使用します。

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>

コード：グラブhere用のサンプルアップ作業

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

。

NG-バインドHTMLディレクティブDocumentation

PS：あなたがサニタイズ注入したり、別のtechiquesを使用することができることを確認してください。

出典

2016-12-10 14:38:59

たくさん簡単です...ありがとう@スーパークール –

Angularjs：どのように置き換えるか、角括弧内の<br>

答えて

関連する問題