Add class to ng-repeat object in angular based on another array

Question

I am trying to add a class to an object within an ng-repeat if a property of that object (name) exists within another array.

Basically, a user can flag an object in the items ng-repeat as correct or incorrect which creates a "judgement" object within the judgements array. Onload of the page, I want to be able to compare the two arrays to add/remove a class based on if the most recent judgement of the object is incorrect or correct.

Based on my fiddle below, item1 and item3 should have a class of "incorrect". How could I accomplish this?

I tried using inArray (see http://jsfiddle.net/arunpjohny/wnnWu/) but could not figure out how to get it to work with specific properties rather than the entire array.

fiddle: http://jsfiddle.net/bTyAa/2/

function itemCtrl($scope) {
  $scope.items = [{
    itemname: "item1"
  }, {
    itemname: "item2"
  }, {
    itemname: "item3"
  }];
  $scope.judgements = [{
    judgementResult: "incorrect",
    date: "2016-02-01T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "correct",
    date: "2016-01-06T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "incorrect",
    date: "2016-01-04T11:03:16-0500",
    item: {
      itemname: "item3"
    }
  }]
}


<div ng-app>
  <div ng-controller="itemCtrl">
    <ul>
      <li ng-repeat="item in items" class="item"> <span>{{item.itemname}}</span>

      </li>
    </ul>
  </div>
</div>

suvroc · Accepted Answer · 2016-02-03 15:15:15Z

2

Try to define new function to get proper class for your item

http://jsfiddle.net/bTyAa/8/

$scope.getJudgementsClass = function(itemName) {
    var matched = $scope.judgements.filter(function(el) {
        return el.item.itemname === itemName; 
    }).sort(function(a,b){
        // Turn your strings into dates, and then subtract them
        // to get a value that is either negative, positive, or zero.
        return new Date(b.date) - new Date(a.date);
        });
    if (matched.length == 0)
    {
        return "";
    }
    console.log(itemName);
    return matched[0].judgementResult;
}

edited Feb 3, 2016 at 15:15

answered Feb 3, 2016 at 15:03

suvroc

3,0621 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mcestone Over a year ago

Thank you, this has gotten me most of the way there. Is there any way with this technique to also make sure that the judgment is the most recent judgment based on the date property?

suvroc Over a year ago

Most recent for specific name? You should just use sort() function

Mcestone Over a year ago

Yes, as you can see in my fiddle, item1 was judged twice. The most recent one should be applied. I changed the date so that the second judgment has the most recent date so you can see jsfiddle.net/bTyAa/7

Mcestone Over a year ago

Perfect! Thank you for your help

Mhand7 · Accepted Answer · 2016-02-03 15:07:19Z

0

why not doing the NG-repeat on the second array since you already have the information in the first array as item in the second array.

and just use the judgement Result as the class ?

function itemCtrl($scope) {
  $scope.items = [{
    itemname: "item1"
  }, {
    itemname: "item2"
  }, {
    itemname: "item3"
  }];
  $scope.judgements = [{
    judgementResult: "incorrect",
    date: "2016-02-01T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "correct",
    date: "2016-01-06T11:03:16-0500",
    item: {
      itemname: "item1"
    }
  }, {
    judgementResult: "incorrect",
    date: "2016-01-04T11:03:16-0500",
    item: {
      itemname: "item3"
    }
  }]
}

<div ng-app>
  <div ng-controller="itemCtrl">
    <ul>
      <li ng-repeat="obj in judgements" ng-class="obj.judgementResult"> <span>{{obj.item.itemname}}</span>

      </li>
    </ul>
  </div>
</div>

answered Feb 3, 2016 at 15:07

Mhand7

5371 gold badge3 silver badges21 bronze badges

2 Comments

Mcestone Over a year ago

This is an interesting approach but doesn't work because not all items will be judged which means they will be missing from the array.

Mhand7 Over a year ago

if those two arrays are coming from two different queries, I think If you combined the queries into one array and return everything in the judgement array with extra parameter or state correct, incorrect, none. I think this approach will minimize the processing and the code in the client side

Alexandr Lazarev · Accepted Answer · 2016-02-03 15:11:54Z

0

You cant iterate through $scope.judgements array on each ng-repeat iteration. Something like:

$scope.isItemInCorrect =  function(itemname){
    console.log($scope.judgements);
    for(var i = $scope.judgements.length; i--;) {
      if ($scope.judgements[i].item.itemname == itemname 
          && $scope.judgements[i].judgementResult == 'incorrect') {
          return true;
      } 
    }        
}

<li ng-repeat="item in items" ng-class="{'incorrect' : isItemInCorrect(item.itemname)}"  class="item"> <span>{{item.itemname}}</span>

http://jsfiddle.net/n0eb82j3/7/

answered Feb 3, 2016 at 15:11

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Collectives™ on Stack Overflow

Add class to ng-repeat object in angular based on another array

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related