javascript - 独特的过滤器 ng-repeat Angular。隐藏列中而不是整行中的重复值

标签 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,
    name: "Gregor"
  }];

现在在 html View 中我想表示一个如下所示的表格:

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

我尝试过 UI-Angular 但效果不佳。我需要一个像“unique”这样的过滤器,但需要稍加修改。

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

最佳答案

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

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

完整plnkr .

关于javascript - 独特的过滤器 ng-repeat Angular。隐藏列中而不是整行中的重复值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38345232/

相关文章:

Jquery - 选择立即 li 文本而不选择子 ul 的文本

javascript - 如何在 angularjs 中编写返回 promise 的异步方法?

angularJS $broadcast 和 $on

javascript - header 中包含文件数据的发布请求。好的做法吗?

javascript - 从元素获取文本并将其作为值放入文本中

javascript - 在文本区域发送值

javascript - 使用 javascript 交换图像

javascript - <option> append 在 jquery 中不起作用

c# - RegisterStartupScript 是否会增加页面大小

javascript - 在加载所有 ajax 调用后如何调用函数?