Angular JS render variable in scope function to view and make comparison

Question

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-click="sort()" 
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 (){
$scope.unsortedAsset = $scope.myData.totalAsset;
$scope.sortedAsset=$scope.unsortedAsset.split("").sort().join("");
}

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

David Tansey · Accepted Answer · 2017-08-07 23:08:00Z

0

In sort() you directly access $scope.myData.totalAsset. This gets resolved as a reference to the last object in $scope.myData that has a totalAsset member.

Instead you wanted to iterate over all objects in myData. That can be achieved by supplying a parameter to the sort function like in the code below.

$scope.sort = function (totalAsset){
    $scope.unsortedAsset = totalAsset;
    $scope.sortedAsset=$scope.unsortedAsset.split("").sort().join("");
}

Then you also must call the sort function by supplying the parameter value.

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

edited Aug 7, 2017 at 23:08

David Tansey

6,0004 gold badges38 silver badges54 bronze badges

answered Sep 17, 2016 at 13:22

Jireugi

1038 bronze badges

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

2 Comments

Yujia Guo Over a year ago

Thank you, I still have a bug in my code, that is there are many result in my data but ng-click only give a true/false when i click on the certain item. How can I use ng-click to click one time on my table to display all the true table rows?

Jireugi Over a year ago

Actually that´s a quite different question. I suggest you ask that as a new SO question.

Collectives™ on Stack Overflow

Angular JS render variable in scope function to view and make comparison

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related