如何在angularjs中制作格式表答案

【问题标题】：How to make format table in angularjs如何在angularjs中制作格式表
【发布时间】：2015-10-15 18:05:33
【问题描述】：

我需要使用 angularjs 将列表客户显示为如下图所示的表格，但仍未找到解决方案，可能必须使用 ng-class 但不知道如何申请这种情况。如果每个人都有解决方案，请帮助我。

条件：

性别 = 女性，然后行的文本颜色为绿色
年龄
年龄 > 60 背景颜色为灰色

感谢您的帮助。

【问题讨论】：

我可以生成行但仍然不知道如何为其应用格式。

标签： angularjs html-table

【解决方案1】：

CSS

<style> 

 .isteen {  
    background-color: blue;  
 }  

 .isold {  
    background-color: gray;  
 } 

 .isgirl {  
   color: green;  
 }

<script>  
 var app = angular.module('MyForm', []);  
 app.controller('myCtrl', function ($scope) {  
  $scope.students = [  
        {name: 'Kevin', age: 25, gender: 'boy', phone:'091231232'},  
        {name: 'John', age: 30, gender: 'girl',phone:'091231233'},  
        {name: 'Laura', age: 28, gender: 'girl',phone:'091231234'},  
        {name: 'Joy', age: 15, gender: 'girl',phone:'091231235'},  
        {name: 'Mary', age: 28, gender: 'girl',phone:'091231236'},  
        {name: 'Peter', age: 95, gender: 'boy',phone:'091231237'},  
        {name: 'Bob', age: 50, gender: 'boy',phone:'091231238'},  
        {name: 'Erika', age: 27, gender: 'girl',phone:'091231239'},  
        {name: 'Patrick', age: 40, gender: 'boy',phone:'0912312366'},  
        {name: 'Tery', age: 61, gender: 'girl',phone:'0912312355'}  
       ] ;  
 });

HTML

<table style="min-width: 600px;" >  
   <thead>  
     <tr>  
       <th>No</th>  
       <th>  
        Name
       </th>  
       <th> Age </th>  
       <th >Gender</th> 
        <th>Phone</th>
     </tr>  
   </thead>  
   <tbody>  
     <tr ng-repeat="user in students" ng-class="user.gender=='girl'? 'isgirl':''">  
       <td>  
              {{ $index }}      
       </td>  
       <td>{{ user.name}}</td>  
       <td ng-class="user.age <20?'isteen':user.age >60?'isold':''">{{ user.age}}</td>  
       <td >{{ user.gender}}</td>  
        <td>{{ user.phone}}</td>  
     </tr>  
   </tbody>  
 </table>

编辑at Plunker

【讨论】：

【解决方案2】：

您可以将customers 保存在范围内，并使用ng-repeat 生成行。

<table>
  <tr ng-repeat="customer in customers">
    <td>{{ $index + 1 }}</td>
    <td>{{ customer.Name }}</td>
    <td>{{ customer.Gender }}</td>
    <td>{{ customer.Age }}</td>
  </tr>
</table>

然后您可以为每个单元格添加带有ng-class addnotation 的自定义类：

    <td ng-class="{'className': x.Name == 'Batman'}">{{ customer.Name }}</td>

或整行：

    <tr ng-repeat="customer in customers" ng-class="className : customer.Gender == 'Batman'">

【讨论】：

【解决方案3】：

<tr ng-repeat="customer in customers" ng-class="greenText : customer.Gender == 'Female'">
  <td>{{customer.No}}</td>
  <td>{{customer.Name}}</td>
  <td>{{customer.Gender}}</td>
  <td ng-class="{orangeBg : customer.Age < 20, grayBg : customer.Age > 60}">{{customer.Age}}</td>
  <td>{{customer.Phone}}</td>
</tr>

'customers' 是 'customer' 对象的列表。

greenText、orangeBg 和 grayBg 是 css 类

【讨论】：

唯一的答案可以满足他所要求的 OP 一切。有一个 +1。

【解决方案4】：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body class="container" ng-app="">

<style>
  .green-back{
     background: green;
  }
  </style>
  
  <table ng-init="customers=[{name:'name1',age:11, gender:'Male'},
   {name:'name1',age:22, gender:'Female'}]">
  <tr ng-repeat="customer in customers">
    <td>{{ $index + 1 }}</td>
    <td>{{ customer.name }}</td>
    <td ng-class="{'green-back': customer.gender == 'Female'}">{{ customer.gender }}</td>
    <td>{{ customer.age }}</td>
    <td >{{ customer.c }}</td>
  </tr>
</table>

</body>

以这种方式使用。 ng-class 将帮助您正确提供动态样式，我已经使用 ng-init 声明了 json 数组，并且我提供了我使用的样式。这将生成带有绿色背景的female 性别的td

<style>
    .green-back{
         background: green;
     }
</style>

<table ng-init="customers=[{name:'name1',age:11, gender:'Male'},
 {name:'name1',age:22, gender:'Female'}]">

     <tr ng-repeat="customer in customers">
         <td>{{ $index + 1 }}</td>
         <td>{{ customer.name }}</td>
         <td ng-class="{'green-back': customer.gender == 'Female'}">{{customer.gender }}</td>
         <td>{{ customer.age }}</td>
     </tr>
</table>

【讨论】：