如何使用 angularjs 或 javascript 将 border-bottom 应用于 ng-repeat 模板中最后重复的相同值？

Question

我有以下代码。我想将 border-bottom 应用于 ng-repeat 中的类别（即最后一个相同或重复值的类别）。如果我运行此代码，我将获得所有类别的边框底部，但我不希望那样。我需要应用到类别的最后重复或相同值。

html:

<body ng-app="app" ng-controller="Ctrl">
  <div  ng-repeat="item in categorycount[0].vals">
    <div ng-class="{'border-class':item.category.length}">
      <span >{{item.category}}</span>
      <span>{{item.description}}</span>
    </div>
  </div>
</body>

js:

var app = angular.module('app', []);
app.controller('Ctrl', function($scope,$rootScope) {

  $scope.categorycount = [
  {
    name: 'ABC',
    vals: [
      { description: 'first description', category: 'FIRST'},
      { description: 'second description', category: 'SECOND'},
      { description: 'third description', category: 'SECOND'},
      { description: 'fourth description', category: 'SECOND'},
      { description: 'fifth description', category: 'THIRD'},
      { description: 'sixth description', category: 'THIRD'},
      { description: 'seventh description', category: 'THIRD'},
      { description: 'eighth description', category: 'THIRD'},
      { description: 'ninth description', category: 'FOURTH'},
      { description: 'tenth description', category: 'FOURTH'},
    ],
  },
];

let result={};

$scope.categorycount[0].vals.forEach(ob => {
  if(result[ob.category]){
    result[ob.category]=result[ob.category]+1;
    } else {
    result[ob.category]=1;
    }
  });
  $rootScope.categoryPropertyLength = result;
  console.log(result);//{FIRST: 1, SECOND: 3, THIRD: 4, FOURTH: 2}

});

css:

.border-class{
  border-bottom: 1px solid black;
}

我在想我没有在模板中写一些条件。请帮助我得到这个解决方案。

已创建 Plnkr。

当前输出：

预期输出：

Answer 1

您可以查看下一项：

‘border-class’: categoryCounts[0].vals[$index+1] && item.category !== categoryCounts[0].vals[$index+1].category P.S。很抱歉回答简短且未格式化，这是在 phone 上做的:)

Answer 2

你可以试试这个条件：

ng-class="{'border-class': ($index == categorycount[0].vals.length - 1) || categorycount[0].vals[$index+1].category != item.category}"

如果它是最后一个元素或者如果后面的元素有不同的类别，基本上添加边框，假设列表按类别排序。

如何使用 angularjs 或 javascript 将 border-bottom 应用于 ng-repeat 模板中最后重复的相同值？

How to apply border-bottom to the last repeated same value in ng-repeat template using angularjs or javascript?

javascript

html

css

angularjs

angularjs-ng-repeat