如何使用angularjs过滤具有相同列值的记录?

时间:2018-06-04 07:25:56

标签: arrays angularjs

我有下表

    Name  |  DeviceName  |  TabName  |  OnText  |  OffText
    GENER    Gener           Gener       Stop       TEST
    GENER    Gener           Gener       Start      TEST
    ATS      ATS             ATS         Open       CB1
    ATS      ATS             ATS         Close      CB1
    ATS      ATS             ATS         Open       CB2
    ATS      ATS             ATS         Close      CB2
    ATS      ATS             ATS         Start      Gener
    ATS      ATS             ATS         Stop       Gener

我在变量$scope.controls中使用了AngularJS和Node.js这个表。 并且我知道我想推入一个新表,其中包含不具有相同OffText值的记录。

我想创建下表:

Name  |  DeviceName  |  TabName  |  OnText  |  OffText
GENER    Gener           Gener       Stop       TEST
ATS      ATS             ATS         Open       CB1
ATS      ATS             ATS         Open       CB2
ATS      ATS             ATS         Start      Gener

我想用AngularJS做这件事。

1 个答案:

答案 0 :(得分:3)

angular.module('app', []).controller('ctrl', function($scope){
  $scope.controls = [
    {Name:'Name2', OffText:'1'},
    {Name:'Name3', OffText:'2'},
    {Name:'Name1', OffText:'1'},    
    {Name:'Name5', OffText:'2'},
    {Name:'Name6', OffText:'3'},
    {Name:'Name7', OffText:'4'},
    {Name:'Name4', OffText:'2'}    
  ]
})
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>

<table ng-app='app' ng-controller='ctrl'>
  <thead>
    <tr>
      <th>Name</th>    
      <th>OffText</th>
    </tr>  
  </thead>
  <tbody>
    <tr ng-repeat='item in temp = (controls | orderBy : "OffText" | orderBy : "Name")' ng-if='$first || item.OffText != temp[$index - 1].OffText'>
      <td>{{item.Name}}</td>    
      <td>{{item.OffText}}</td>
    </tr>
  </tbody>
</table>