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

【问题标题】：a better way to view the field name and values in Angular.JS在 Angular.JS 中查看字段名称和值的更好方法
【发布时间】：2014-05-28 09:30:04
【问题描述】：

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

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

我认为应该有更好的方法来收集所有内容并运行循环以显示所有字段名称及其字段值。

提前感谢您的帮助。

【问题讨论】：

标签： javascript angularjs dry

【解决方案1】：

您可以使用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。

【讨论】：