AngularJS get first item in a repeat that has a certain value

Question

<div ng-repeat="widget in widgets" 
     ng-class="">
     <div>{{widget.row}}</div>
</div>

I'm trying to apply a class inside the repeat based on a particular value in the repeat, for example if widget.row = 0 and it is the first widget with that value displayed then give it a class and all the other widgets that have row as 0 do not get the class. This will need to be the case if it equals 1 or 2 and so on so I can't just use $first as there will be multiple row values and multiple widgets for example it may output something like:

0 0 0 0 1 1 2 2 2 2

Answer 1

So the easiest way for me to achieve this was using the Adjacent sibling selector rather than do it with angular as each item is not really aware of the others:

 <div ng-repeat="widget in widgets" 
      class="widget-row-{{widget.row}}">
     <div>{{widget}}</div>
 </div>

and then use CSS for:

.widget-row-0:first-child {}
.widget-row-0 + .widget-row-1 {}
.widget-row-1 + .widget-row-2 {}
.widget-row-2 + .widget-row-3 {}

Answer 2

Best practise is to prepare your data in a init function in your controller. It's nice and KISS! It's the best way to prepare your data in control function instead of misapply the E2E binding of AngularJS. It solve your problem so no class is written when there is no need for (as you asked for). Its proceeded once instead of calling a function again, again and again by E2E binding like ng-class="shouldIAddAClass()".

View

<div ng-repeat="widget in widgets"
    ng-class="{ 'first' : widget.first }">
    <div>{{widget.row}}</div>
</div>

Controller

$scope.widgets = [{
    row: 0
}, {
    row: 2
},{
    row: 0
},{
    row: 1
},{
    row: 1
},{
    row: 2
},{
    row: 0
}];

//self calling init function
(function init () {

    var widgetRowFound = {};

    angular.forEach($scope.widgets, function (widget, key) {
        if (angular.isDefined(widgetRowFound[widget.row])) {
            $scope.widgets[key].first = false;
        } else {
            $scope.widgets[key].first = true;
            widgetRowFound[widget.row] = true;
        }
    });
})();

Answer 3

Not the cleanest one but will work

<div ng-repeat="widget in widgets">
    <div ng-class="{'myClass': applyClass(0, widget.row)}"></div>
</div>

----------

$scope.widgetsRows = {};

function applyClass(number, row){
  if(!$scope.widgetsRows[row]){
    $scope.widgetsRows[row] = true
  }
  return row == number && $scope.widgetsRows[row];
}

Answer 4

You can add the class you want to use to the widget objects in the controller first:

var tempRow = "";
for(var i = 0;i < $scope.widgets.length;i++) {
    if($scope.widgets[i].row != tempRow) {
        $scope.widgets[i].class = "myClass";
        tempRow = $scope.widgets[i].row;
    }
}

Then you can use that class:

<div id="widgets" ng-repeat="widget in widgets" 
     class="{{widget.class}}">
     <div>{{widget.row}}</div>
</div>

Hope this helps

Answer 5

You can create a method that will be called from ng-class to achieve your goal. The method should return the class to be used.

$scope.firstHitFound = false;
$scope.isFirstZeroValue = function(value){
     if($scope.firstHitFound == false && value == 0){
         $scope.firstHitFound = true;
         return class1;
     }else{
         return class2;
     }
}

The HTML / Angular shoudl look as:

<div ng-class="isFirstZeroValue(widget.row)">

Answer 6

If you want to style it, add the class to all the widget that match your criteria, and use css to perform it only on the first of them.

Html:

<div id="widgets" ng-repeat="widget in widgets" 
     ng-class="{'widget-first': widget.row == 0}">
     <div>{{widget.row}}</div>
</div>

Css:

#widgets.widget-first:first-of-type {
    background: #ff0000;
}

Answer 7

You can use ng-class in addition of your ng-repeat:

Example

<div ng-repeat="widget in widgets" ng-class="{'test': widget.value === 0}">
    <div>{{widget.row}}</div>
</div>

Answer 8

You need to call a method that will check if the row result is not same with previous value. If it not same , it will return true value and will be assigned ng-class, and if not return false. Filter this out using ng-if.

Html

<div ng-repeat="widget in widgets" 
     ng-class="">
     <div ng-if="calculate(widget.row)">
         <div ng-class="test">{{widget.row}}</div>
     </div>
     <div ng-if="!calculate(widget.row)">
         <div>{{widget.row}}</div>
     </div>
</div>

Controller

var arr = [];
$scope.calculate = function (row) {
    arr.push(row);

    var breakLoop = false;
    angular.forEach(arr, function (oldVal, newVal) {
       breakLoop = false;
       if (oldVal != newVal) {
            breakLoop = true;
       }
    )};
    return breakLoop;
}