Angular 1.5 在 table 单元格中显示数组的多个元素

Question

嗨，我是 Angular 的新手，我正在寻找一些反馈。我正在制作一个包含 4 列的 table：

检查 |流 |信号健康 |总信号。

我暂时使用虚拟数据，因为我没有 API。 我的问题是我无法将 signal_health 数组中的多个元素显示为一个值 。相反，Angular 将对象数组渲染到 UI 中，因为 [{"id":1},{"id":2},{"id":3}] 我需要的只是值。
我必须能够在一个 td 块中显示多个值，因为每个流都有多个 signal_health 值。但是我不知道怎么实现。
欢迎任何反馈，谢谢！

下面是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}
    ];
}

Answer 1

您可以在数组上使用映射函数 return 您想要的嵌套值。在您的 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>

Answer 2

您至少有三个选项来打印数组值：

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

选项 3： 在 HTML (PLUNKER)

中重复之前转换数据

控制器

function myCtrl(){
    var ctrl = this;

    ctrl.reports = getData();

    function getData(){
        var data = [..]; //Your data

        for (let d of data) {
            d.signal_health = d.signal_health.map(function(item){
                return item.id;
            }).join(" | ");
        } 

        return data;
    }
}

HTML（只需重复数据即可）

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

Angular 1.5 在 table 单元格中显示数组的多个元素

Angular 1.5 displaying multiple elements of an array in a table cell

javascript

arrays

frontend

angularjs