angularjs表格方式显示数据

最新推荐文章于 2019-04-22 22:44:00 发布

转载最新推荐文章于 2019-04-22 22:44:00 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guanglin/p/5200086.html

文章标签：

#javascript #ViewUI

本文展示了如何通过模板和循环实现用户信息的表格显示，并提供了用户信息的编辑功能，包括姓名和国家的显示与编辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>

<style>

table, th , td {

  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>