javascript - 如何通过 ng-click 在 angularjs 中使用键、值对显示表中更多或更少的行

Question

我有 json，其中对象的每个参数都有超过 40 个 key, val 对。所有数据都放入页面上的 html 表中我希望用户能够更改 html 页面上的多行。

首先，为了减少表中的行数，我编写了 ng-if 语句。我添加了 ng-if 因为 LimitTo 不适用于 key, val 对。事实上我被困在这里。对我来说，主要问题是 key, val 对。当 json 文件包含 key,val 对时，如何添加更多/更少按钮来帮助用户隐藏或显示更多行。

我的html

<table class="table ng-cloak" ng-if='$index<10'  ng-repeat="shop in shops | filter:isActive">
  <thead>
    <tr>
      <th>#</th>
      <th>Месяц</th>
      <th>Число кликов</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat='(key, val) in shop.products' ng-if="$index < 10">
      <td>{{ $index + 1 }}</td>
      <td>{{ key }}</td>
      <td>{{ val }}</td>
    </tr>
  </tbody>
</table>

我的reduce json

[
  {
    "products": {
      "1359568800": 74,
      "1361988000": 71,
      "1364666400": 83,
      "1367258400": 72,
      "1369936800": 78
    },
    "name": "moskva",
    "avg_check": {
      "1359568800": 6479,
      "1361988000": 7375,
      "1364666400": 8477,
      "1367258400": 9292,
      "1369936800": 8357
    },
    "income": {
      "1359568800": 479515,
      "1361988000": 523662,
      "1364666400": 703601,
      "1367258400": 669072,
      "1369936800": 651921
    }
  }
]

Answer 1

我们不能对对象使用默认过滤器。所以使用自定义过滤器

app.filter('myLimitTo', [function(){
return function(obj, limit){
    var keys = Object.keys(obj);
    if(keys.length < 1){
        return [];
    }

    var ret = new Object,
    count = 0;
    angular.forEach(keys, function(key, arrayIndex){
       if(count >= limit){
            return false;
        }
        ret[key] = obj[key];
        count++;
    });
    return ret;
};

查看 fiddle https://jsfiddle.net/ebinmanuval/uLo0bo0u/