Angular 1.5在表格單元格中顯示數組的多個元素

嗨，我是Angular的新手，我正在尋找一些反饋。我正在製作一張4列的表格：

查看|流|信號健康|總信號。

由於我沒有API，我現在使用的是虛擬數據。 我的問題是，我無法顯示來自signal_health數組的多個元素作爲值。相反，Angular將對象數組呈現爲UI，作爲[{"id":1},{"id":2},{"id":3}]我所需要的僅僅是值。
我必須能夠在一個td塊中顯示多個值，因爲每個流都有多個signal_health值。但我不知道如何做到這一點。
歡迎任何反饋意見，謝謝！Angular 1.5在表格單元格中顯示數組的多個元素

這裏是HTML如下：

<table class="table table-striped table-bordered table-hover-alt"> 
    <thead> 
     <tr> 
      <th>Select</th> 
      <th>Stream</th> 
      <th>Signal Health</th> 
      <th>Total Signals</th> 
     </tr> 
    </thead> 
    <tbody ng-cloak> 
     <tr ng-repeat="value in sc.reports"> 
      <td><input type="checkbox" name="" value=""></td> 
      <td>{{value.stream}}</td> 
      <td>{{value.signal_health}}</td> 
      <td>{{value.total_signal}}</td> 
     </tr> 
    </tbody> 
</table>

這裏是我的控制器：

function SignalManagementController(){ 
    var ctrl = this; 

    ctrl.reports =[ 
     {stream:"MTV", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:[ {value:5}, {value:3}, {value:4}, {value:5}], status_vde:[{value:5}, {value:3}, {value:4}, {value:5}], total_signal: 1}, 
     {stream:"SciFy", signal_health:[{id:1}, {id:2}, {id:3}],status_cli:[{value:2, value:4, value:5}, {value:3}, {value:4}, {value:5}], status_vde:4, total_signal: 15}, 
     {stream:"Spike", signal_health:[{id:1}, {id:2}, {id:3}],status_cli:4, status_vde:4, total_signal: 12}, 
     {stream:"Nick", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:4, status_vde:4, total_signal: 13}, 
     {stream:"Cartoon", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:4, status_vde:4,total_signal: 111}, 
     {stream:"Starz", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:4, status_vde:4, total_signal: 12} 
    ]; 
}

來源

2017-04-21 hjm

你至少有三種選擇打印的數組值：

OPTION 1 ：從你的html調用你的控制器的功能（PLUNKER）

控制器

function myCtrl(){ 
    var ctrl = this; 

    ctrl.reports = [...]; //Your data  

    ctrl.showSignalHealth = function(signal_health){ 
     return signal_health.map(function(item){ 
      return item.id; 
     }).join(","); 
    } 
}

HTML

<tr ng-repeat="value in ctrl.reports"> 
    <td>{{value.stream}}</td> 
    <td>{{ctrl.showSignalHealth(value.signal_health)}}</td> 
    <td>{{value.total_signal}}</td> 
</tr>

選項2：使用自定義 angular filter（ PLUNKER）

控制器

app.filter('printSignalHealth', function() { 
    return function(signal_health) { 
     return signal_health.map(function(item){ 
      return item.id; 
     }).join("-"); 
    }; 
});

HTML

<tr ng-repeat="value in ctrl.reports"> 
    <td>{{value.stream}}</td> 
    <td>{{value.signal_health | printSignalHealth}}</td> 
    <td>{{value.total_signal}}</td> 
</tr>

OPTION 3：在HTML（PLUNKER）

CONTROLLER

重複之前變換數據

HTML（只是重複數據將作品）

<tr ng-repeat="value in ctrl.reports"> 
    <td>{{value.stream}}</td> 
    <td>{{value.signal_health}}</td> 
    <td>{{value.total_signal}}</td> 
</tr>

來源

2017-04-22 01:22:34

這個答案工作謝謝你！ – hjm

您可以使用地圖功能的陣列上回你想要的嵌套值。在你的HTML，更換你的線信號衛生：

<td rowspan="{{sc.reports.signal_health.length}}">{{value.signal_health}}</td>

這一行：

<td rowspan="{{sc.reports.signal_health.length}}">{{value.signal_health.map(function(obj) { return obj.id; })}}</td>

來源

2017-04-21 20:48:27 Ken

我得到這個錯誤語法錯誤：令牌 '{' 是一個意外，希望[）]在表達式的39列[value.signal_health .map（function（obj）{return obj.id; }）]從[{return obj.id; }）]。 – hjm

Angular 1.5在表格單元格中顯示數組的多個元素

回答

相關問題