更改或编辑对象中的关键帧，以便在视图中显示.使用Angular

Changing or editings Keys in objects, in order to show in view. Using Angular

本文关键字：视图 显示 Angular 使用 关键帧 编辑 对象      更新时间：2023-09-26

示例JSON:

[{"name":"John", "date_of_birth":"01/12/1987","marital_status": "Open Relationship"}]

示例视图：

<table>
  <tr>
   <th> Name </th>
   <th>Date of Birth</th> 
  <th>Martial Status</th>
 </tr>
 <tr ng-repeat= "profile in profiles">
  <td>{{profile.name}}</td>
  <td>{{profile.date_of_birth}}</td>
  <td>{{profile.marital_status}}</td>
 </tr>
</table>

我想要的是不重复键或表格标题。我知道如何重复ng并获取密钥和值。但我喜欢的是更改键，使它们看起来很漂亮，例如：date_of_firth应该是date of birth，但上面有ng个重复。

我同意你的问题下面的评论，即这不是最好的方法。此外，请记住，在实际中，当迭代对象的params时，不应该依赖特定的顺序（请参阅https://github.com/angular/angular.js/issues/6210)。

但是 ；）本着解决有趣问题的精神…

如果你真的想这样做，你可以这样做：

<table>
  <tr ng-repeat="(key, value) in profiles[0]">
   <th>{{ key | snailToHuman }}</th>
 </tr>
 <tr ng-repeat= "profile in profiles">
  <td>{{profile.name}}</td>
  <td>{{profile.date_of_birth}}</td>
  <td>{{profile.martial_status}}</td>
 </tr>
</table>

并创建一个过滤器snailToHuman，例如：

app.filter('snailToHuman', function () {
  return function (snail) {
    return snail.split('_').map(function (word) {
      word.charAt(0).toUpperCase() + word.slice(1);
    }).join(' ');
  };
})
相关文章：