在Angular.JS中查看字段名和值的更好方法

a better way to view the field name and values in Angular.JS

本文关键字：更好 方法 字段 JS Angular      更新时间：2023-09-26

在我的表单中，我有如下设置的字段:

<div>
    Email
    <div class="controls">
        <input type="email" ng-model="user.email" name="lead[email]">
    </div>
</div>
<div>
     First name
    <div class="controls">
        <input type="text" ng-model="user.name" name="lead[name]">
    </div>
</div>

等等。当用户填写了所有字段后，我需要生成一个确认视图，在这种情况下，它只是同一页面中的一个单独的选项卡。这就是我显示已填充字段的方式。

<table class="table table-bordered">
  <tr ng-show="user.name" >
     <td class="col-md-4">Name:</td>
     <td>{{user.name}}</td>
  </tr>
  <tr ng-show="user.email" >
    <td class="col-md-4">Email:</td>
    <td>{{user.email}}</td>
  </tr>
</table>

我认为应该有一个更好的方法来收集所有并运行一个循环来显示所有的字段名和它们的字段值。

提前感谢您的帮助

您可以像这样使用ngRepeat列出所有具有值的对象属性:

<table class="table table-bordered">
    <tr ng-repeat="(key, value) in user">
        <td class="field-name col-md-4">{{key}}:</td>
        <td>{{value}}</td>
    </tr>
</table>

演示:http://plnkr.co/edit/XiA63e74xpm9aVNUdXCM?p=preview

还请注意，为了更好的可读性，我在CSS中使用.field-name {text-transform: capitalize;}大写键名，以便email显示为Email。

相关文章：