Question

我需要使用angularjs将列表客户显示为以下图像，但仍然没有找到解决方案，可能必须使用ng-class但不知道如何申请此案例。如果每个人都有解决方案，请帮助我。

条件：

性别=女性，然后行的文字颜色为绿色
年龄＆lt; 20背景颜色为橙色
年龄＆gt; 60背景颜色为灰色

感谢您的帮助。

Answer 1

您可以将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注释的自定义类：

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

或整行：

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

Answer 2

<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'是'客户'对象的列表。

greenText，orangeBg和grayBg是css类

Answer 3

<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数组，并且我已经提供了我使用过的样式。这将生成td female性别与绿色背景

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

Answer 4

CSS

<style> 

 .isteen {  
    background-color: blue;  
 }  

 .isold {  
    background-color: gray;  
 } 

 .isgirl {  
   color: green;  
 }

的js

<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

如何在angularjs中制作格式表

4 个答案: