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在表格单元格中显示数组的多个元素

回答

相关问题