AngularJS：没有类似密钥的ng-repeat

Question

我有objs列表：

[{
 key:test1
 name: name1
},
{
 key:test1
 name: name2
},
{
 key:test2
 name: name3
}]

我使用ng-repeat来显示它：

<tr ng-repeat=item in list>
  <td>{{item.key}}</td>
  <td>{{item.name}}</td>
</tr>

是否可以在不改变结构的情况下将值与相似的键组合？在我的情况下不要显示两次test1

现在：

test1 : name1

test1 : name2

test2 : name3


desired result:

test1 : name1

_____  name2

test2 : name3

Answer 1

您可以使用groupBy过滤器：

angular.module('app', ['angular.filter']).controller('ctrl', function($scope){
  $scope.list = [{
     key:'test1',
     name: 'name1'
    }, {
     key:'test1',
     name: 'name2'
    },{
     key:'test1',
     name: 'name3'
    },{
     key:'test2',
     name: 'name4'
    }];
})

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <tbody>
    <tr ng-repeat-start="(key, value) in list | groupBy: 'key'">      
      <td>{{key}}</td>
      <td>{{value[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='item in value.splice(1)'>
      <td></td>
      <td>{{item.name}}</td>
    </tr>
  </tbody>
</table>

Answer 2

ng-repeat="item in list | unique:'key'"

Answer 3

以下是使用key在同一个地方实现常见angular-filter值的方法：

angular.module('app',['angular.filter']).controller('mainCtrl', function($scope){$scope.list = [{
       key:'test1',
       name: 'name1'
      },
      {
       key:'test1',
       name: 'name2'
      },
      {
       key:'test2',
       name: 'name3'
      }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>


<div ng-app='app' ng-controller='mainCtrl'>
    <div ng-repeat="(key, value) in list | groupBy: 'key'">
      <span ng-repeat='val in value'>{{val.name}} </span>
    </div>     
</div>

Answer 4

在使用ng-repeat更新列表之前。

function rd(o, k, v) {
   var n = [];
   var l  = {};

   for(var i in o) {
      if (l.hasOwnProperty(o[i][k])){
         o[i][v] =  l[o[i][k]][v]+ " " +  o[i][k]
         l[o[i][k]] = o[i]
      } else{
         l[o[i][k]] = o[i];
      }
   }

   for(i in l) {
      n.push(l[i]);
   }
   return n;
}

var list = rd(arr, "key", "name");

Answer 5

你可以试试这个：

＆＃13;

＆＃13;

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
    $scope.items = [{
     "key":"test1",
     "name": "name1"
    },
    {
     "key":"test1",
     "name": "name2"
    },
    {
     "key":"test2",
     "name": "name3"
    }];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="item in items | groupBy: 'key'">
    	<h3>Key : {{item[0].key}}</h3>
      <p>Names : <span ng-repeat='i in item'>{{i.name}} </span></p>
    </div> 
</div>

＆＃13;

＆＃13;

＆＃13;