angulaire 1.5 afficher plusieurs éléments d'un tableau dans une cellule de table

Question

Salut je suis nouveau angulaire et je suis à la recherche des commentaires. Je fais une table avec 4 colonnes:

check | flux | santé du signal | signal total.

J'utilise des données fictives pour le moment que je n'ai pas une API. Mon problème est que je ne suis pas en mesure d'afficher plusieurs éléments du tableau de signal_health comme une valeur. Au lieu de cela, Angular rend le tableau d'objets dans l'interface utilisateur comme [{"id":1},{"id":2},{"id":3}] ce dont j'ai besoin est juste la valeur.
je dois pouvoir afficher plusieurs valeurs dans un seul bloc td, puisque chaque flux a de multiples valeurs de signal_health. Mais je ne sais pas comment accomplir cela.
Tous les commentaires seront les bienvenus, merci!

Voici le code HTML ci-dessous:

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

Voici mon contrôleur:

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

Vous avez au moins trois options pour imprimer les valeurs du tableau:

OPTION 1 : Appelez une fonction de votre contrôleur à partir de votre html (PLUNKER)

CONTRÔLEUR

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> 

---

OPTION 2: Utilisez une coutume angular filter ( PLUNKER)

CONTRÔLEUR

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: transformer les données avant de les répéter dans le code 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 (répéter les données et seront des œuvres)

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

Answer 2

Vous pouvez utiliser une fonction de carte sur le tableau pour renvoyer la valeur imbriquée que vous voulez. Dans votre code html, remplacez votre ligne pour la santé du signal:

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

avec cette ligne:

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