Yujia Guo Yujia Guo - 2 months ago 16
AngularJS Question

How to use ng-class compare to self invoked value

Hi I have been using this tag to change my css style, if the condition totalAsset and sortedAsset are same

<div class="table-row" ng-repeat="x in myData"
ng-model="sort(x.totalAsset)"
ng-class="{'lightblue': x.totalAsset == sortedAsset}">


totalAsset is my data in like this

$scope.myData = [
{
totalAsset: "23557"
},
{
totalAsset: "4512190",
},
{
totalAsset: "2190",
},
{
totalAsset: "1256790",
}
]


i have create a function that self sort the totalAsset

$scope.sort = function(totalAsset) {

$scope.unsortedAsset = totalAsset;
$scope.sortedAsset = $scope.unsortedAsset.split("").sort().join("");
console.log(sortedAsset);
}


in the logic only the first and last row will become blue the other two rows remain same.

But my problem here is only the last one become blue, the first one doesn't.

Answer

I am not sure about, if you need the {{ }}( they are not needed in ng2 atleast ).

<div class="table-row" ng-repeat="x in myData" 
ng-model="sort(x.totalAsset)" 
ng-class="x.totalAsset == sortedAsset ? 'lightblue' : ''">

Second approach is to do the if in controllers function

$scope.areValuesEqual() {
if($scope.x.totalAssets == $scope.sortedAssets) {
return 'lightblue';
}

return; 
}

But this looks rather ugly, but i am just throwing this out there.