Javascript 独特的过滤器ng重复角度。隐藏列中的重复值，而不是整行_Javascript_Html_Angularjs_Html Table

Javascript 独特的过滤器ng重复角度。隐藏列中的重复值，而不是整行

javascript html angularjs

Javascript 独特的过滤器ng重复角度。隐藏列中的重复值，而不是整行,javascript,html,angularjs,html-table,Javascript,Html,Angularjs,Html Table,假设我有一个对象： $scope.men= [ { age: 21, name: "John" }, { age: 21, name: "Daenerys" }, { age: 21, name: "Sansa" } { age: 50, name: "Cersei" }, { age: 50, name: "No one" }, { age: 50,

假设我有一个对象：

$scope.men= [
  {
    age: 21,
    name: "John"
  }, 
  {
    age: 21,
    name: "Daenerys"
  },
  {
    age: 21,
    name: "Sansa"
  }
      {
    age: 50,
    name: "Cersei"
  }, 
  {
    age: 50,
    name: "No one"
  },
  {
    age: 50,
    name: "Gregor"
  }];

现在在html视图中，我想表示一个如下所示的表：

-------------------
| age   | name    |
-------------------
| 21    | Jhon    |
-------------------
|       | Daenerys|
-------------------
|       | Sansa   |
-------------------
| 50    | Cersei  |
-------------------
|       | Gregor  |
-------------------

我试过了，但效果不好。我需要一个像“独特”的过滤器，但稍加修改

编辑：

我的目标是隐藏列“年龄”中的重复值。

您可以将$scope.men修改为不同的对象（按年龄分组），然后在其上使用ng repeater

var obj = {};

$scope.men.forEach(function(men) {
      obj[men.age] = obj[men.age] || [];
      obj[men.age].push(men);
});

$scope.men = obj;

Now you can use ng-repeat over $scope.men

您可以将$scope.men修改为不同的对象（按年龄分组），然后在其上使用ng repeater

var obj = {};

$scope.men.forEach(function(men) {
      obj[men.age] = obj[men.age] || [];
      obj[men.age].push(men);
});

$scope.men = obj;

Now you can use ng-repeat over $scope.men

另一个简单而直接的解决方案是进行三元检查

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <table>
      <thead>
        <tr>
          <th>Age</th>
          <th>name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="m in men | orderBy:'age'">
          <td>{{men[$index-1].age !== m.age ? m.age : ''}}</td>
          <td>{{m.name}}</td>
        </tr>
      </tbody>
    </table>
  </body>


你好{{name}}
年龄
名称
{{men[$index-1]。年龄！==m.age？m.age:''}}
{{m.name}}

完整。

另一个简单而直接的解决方案是进行三元检查

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <table>
      <thead>
        <tr>
          <th>Age</th>
          <th>name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="m in men | orderBy:'age'">
          <td>{{men[$index-1].age !== m.age ? m.age : ''}}</td>
          <td>{{m.name}}</td>
        </tr>
      </tbody>
    </table>
  </body>


你好{{name}}
年龄
名称
{{men[$index-1]。年龄！==m.age？m.age:''}}
{{m.name}}

完整。

为什么不按年龄分组

$scope.men

呢？我的目标是在“age”列中隐藏重复的值，或者我不明白你的意思为什么不按年龄分组

$scope.men

呢？我的目标是在“age”列中隐藏重复的值，或者我不明白你的意思这并不意味着你的对象应该始终按年龄排序，在

ng repeat

中添加

| orderBy:'age'

会更好。顺便说一句，

track by$index

没有必要公开

$index

@NexusDuck是的，你是正确的，为了使此解决方案工作，数组必须按年龄排序。它是按ofc年龄排序的，对我来说很好。当然，在排序时，不要在另一个下面显示重复的值，@PrinceJohn将其固定。这意味着您的对象应始终按年龄排序，将

| orderBy:'age'

添加到

ng repeat

中会更好。顺便说一句，

track by$index

没有必要公开

$index

@NexusDuck是的，你是正确的，为了使此解决方案工作，数组必须按年龄排序。它是按ofc年龄排序的，对我来说很好。当然，这就是在排序时不要在另一个下显示重复值的想法，@PrinceJohn将其锁定。