Angularjs ng-repeat有一些条件：

时间：2018-03-05 13:25:08

标签： javascript arrays angularjs json object

这是我的json响应，我将其存储在

中 
$scope.times = response.data;

我的$ scope.times json对象：

[
  {
    "id": 1,
    "status": true,
    "time": "2018-03-05T10:24:15.000Z",
    "complaintId": 1
  },
  {
    "id": 2,
    "status": true,
    "time": null,
    "complaintId": 1
  },
  {
    "id": 3,
    "status": true,
    "time": "2018-03-05T10:53:14.000Z",
    "complaintId": 2
  },
  {
    "id": 6,
    "status": false,
    "time": "2018-03-05T11:58:45.000Z",
    "complaintId": 1
  },
  {
    "id": 7,
    "status": true,
    "time": "2018-03-05T12:11:53.000Z",
    "complaintId": 1
  },
  {
    "id": 8,
    "status": false,
    "time": "2018-03-05T13:23:13.000Z",
    "complaintId": 2
  },
  {
    "id": 9,
    "status": true,
    "time": "2018-03-05T08:17:18.000Z",
    "complaintId": 3
  },
  {
    "id": 10,
    "status": true,
    "time": "2018-03-05T12:32:08.000Z",
    "complaintId": 2
  }
]

我使用ng-repeat = ＆＃39;时间＆＃39; 在html中显示此内容，但我需要获取最后位于complaintId的json对象，例如有很多抱怨：1对象。

我只需要获得最后有抱怨的内容。

我的预期输出时间：

[
  {
    "id": 7,
    "status": true,
    "time": "2018-03-05T12:11:53.000Z",
    "complaintId": 1
  },
  {
    "id": 9,
    "status": true,
    "time": "2018-03-05T08:17:18.000Z",
    "complaintId": 3
  },
  {
    "id": 10,
    "status": true,
    "time": "2018-03-05T12:32:08.000Z",
    "complaintId": 2
  }
]

我的ng-repeat循环代码：

table
tr
  th S.no
  th Time
tr(ng-repeat='time in times')
  td {{$index + 1 }}
  td {{time.status}}

3 个答案:

答案 0 :(得分：1)

（不要判断，这是星期一）

这是我能找到的最佳解决方案。你可以通过.reduce / .filter / .forEach等使用一些ES6魔法来改善它（缩短它）。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="time in times">
<pre>{{time | json}}</pre>
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.times = [{"id":1,"status":true,"time":"2018-03-05T10:24:15.000Z","complaintId":1},{"id":2,"status":true,"time":null,"complaintId":1},{"id":3,"status":true,"time":"2018-03-05T10:53:14.000Z","complaintId":2},{"id":6,"status":false,"time":"2018-03-05T11:58:45.000Z","complaintId":1},{"id":7,"status":true,"time":"2018-03-05T12:11:53.000Z","complaintId":1},{"id":8,"status":false,"time":"2018-03-05T13:23:13.000Z","complaintId":2},{"id":9,"status":true,"time":"2018-03-05T08:17:18.000Z","complaintId":3},{"id":10,"status":true,"time":"2018-03-05T12:32:08.000Z","complaintId":2}];

var a = $scope.times;

var b = []; // collect complaintId
for(var i=0;i<a.length;i++){
	if(!b.includes(a[i].complaintId)){
    	b.push(a[i].complaintId);
    }
}

var c = []; // collect duplicates per complaintId
for(var i=0;i<b.length;i++){
	var temp = []
	for(var j=0;j<a.length;j++){
    	if(b[i] == a[j].complaintId){
        	temp.push(a[j])
        }
    }
    c.push(temp)
}

// now it's safe to `reduce` the inner arrays (per complaintId)

var d = []; // .forEach .reduce
for(var i=0; i<c.length;i++){
    var temp = c[i][0].time;
    var temp2 = c[i][0];
    for(var j=1; j<c[i].length;j++){
        if(c[i][j].time){
            if(new Date(c[i][j].time).valueOf() > new Date(temp).valueOf()){
                temp = c[i][j].time;
                temp2 = c[i][j];
            }
        }
    }
    d.push(temp2)
}

$scope.times = d;

});

</script>

</body>
</html>

答案 1 :(得分：0)

您可以使用角度滤镜模块

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

然后使用以下方法过滤掉重复项：

ng-repeat="time in times | unique: 'complaintId'"


angular.module('app', ['angular.filter'])

.controller('test', function($scope) {
  $scope.items = [
  {
    "id": 1,
    "status": true,
    "time": "2018-03-05T10:24:15.000Z",
    "complaintId": 1
  },
  {
    "id": 2,
    "status": true,
    "time": null,
    "complaintId": 1
  },
  {
    "id": 3,
    "status": true,
    "time": "2018-03-05T10:53:14.000Z",
    "complaintId": 2
  },
  {
    "id": 6,
    "status": false,
    "time": "2018-03-05T11:58:45.000Z",
    "complaintId": 1
  },
  {
    "id": 7,
    "status": true,
    "time": "2018-03-05T12:11:53.000Z",
    "complaintId": 1
  },
  {
    "id": 8,
    "status": false,
    "time": "2018-03-05T13:23:13.000Z",
    "complaintId": 2
  },
  {
    "id": 9,
    "status": true,
    "time": "2018-03-05T08:17:18.000Z",
    "complaintId": 3
  },
  {
    "id": 10,
    "status": true,
    "time": "2018-03-05T12:32:08.000Z",
    "complaintId": 2
  }
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<div ng-app="app">
  <div ng-controller="test">
    <table>
      <tr ng-repeat="item in items | unique: 'complaintId'">
        <td>{{$index + 1}}</td>
        <td>{{item.status}}</td>
      </tr>
    </table>
  </div>
</div>

答案 2 :(得分：0)

尝试使用loadash lib。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

 <div ng-repeat="c in times">
        {{c.complaintId}}  -  {{c.time}}
    </div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   
     $scope.times= [{
            "id": 1,
            "status": true,
            "time": "2018-03-05T10:24:15.000Z",
            "complaintId": 1
        },
        {
            "id": 3,
            "status": true,
            "time": "2018-03-05T10:53:14.000Z",
            "complaintId": 2
        },
        {
            "id": 6,
            "status": false,
            "time": "2018-03-05T11:58:45.000Z",
            "complaintId": 1
        },
        {
            "id": 7,
            "status": true,
            "time": "2018-03-05T12:11:53.000Z",
            "complaintId": 1
        },
        {
            "id": 8,
            "status": false,
            "time": "2018-03-05T13:23:13.000Z",
            "complaintId": 2
        },
        {
            "id": 9,
            "status": true,
            "time": "2018-03-05T08:17:18.000Z",
            "complaintId": 3
        },
        {
            "id": 10,
            "status": true,
            "time": "2018-03-05T12:32:08.000Z",
            "complaintId": 2
        }
    ];
    
   $scope.times = _.sortBy($scope.times,'time').reverse();
  $scope.times= _.uniqBy($scope.times, 'complaintId');
 // console.log($scope.times);
});
</script>

</body>
</html>

相关问题
最新问题