javascript - Angular 1.5 在表格单元格中显示数组的多个元素

Question

大家好，我是 Angular 的新手，我正在寻找一些反馈。我正在制作一个包含 4 列的表格:

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

由于我没有 API，目前我正在使用虚拟数据。 我的问题是我无法将 signal_health 数组中的多个元素显示为一个值。相反，Angular 将对象数组呈现为 [{"id":1},{"id":2},{"id":3}] 我需要的只是值(value)。
我必须能够在一个 td block 中显示多个值，因为每个流都有多个 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>

这是我的 Controller :

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

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

选项 1:从您的 html (PLUNKER) 调用 Controller 的功能

Controller

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 )

Controller

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)

Controller

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>