CODEWITHSUNDEEP
javascriptarraysangularjsangularjs-ng-repeat
Mcestone
Mcestone

Reputation: 864

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

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>

Upvotes: 0

Views: 370

Answers (3)

suvroc
suvroc

Reputation: 3062

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;
}

Upvotes: 2

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12862

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/

Upvotes: 0

Mhand7
Mhand7

Reputation: 537

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>

Upvotes: 0

Related Questions