如何在ng-repeat模板中使用angularjs或javascript对最后一个重复的相同值进行border-bottom应用？

Question

我有以下代码。我想在ng-repeat模板中，将border-bottom应用于类别（即最后一个相同或重复值的类别）。如果我运行这段代码，我得到的是所有类别的border-bottom，但我不想这样。我需要应用于最后一个重复或相同值的类别。

html.js

<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

你可以尝试用这个条件。

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

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

Answer 2

你可以查看下一个项目。

'border-class': categoryCounts[0].vals[$index+1] && item.category !== categoryCounts[0].vals[$index+1].categoryP.S.抱歉，答案很短，没有格式化，是在手机上做的:)

如何在ng-repeat模板中使用angularjs或javascript对最后一个重复的相同值进行border-bottom应用？

问题描述投票：0回答：1

1个回答

最新问题

如何在ng-repeat模板中使用angularjs或javascript对最后一个重复的相同值进行border-bottom应用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1