ng-show not never shows

Question

Following code always evaluates Top contributors as true asn Contributors as false. I can see the member.price and member.amount change? Anyone have an Idea what I am doing wrong?

<md-virtual-repeat layout-wrap class="toast" ng-repeat="member in members| filter:searchText | orderBy:orderByFunction" >
    <div class="subtitle"  ng-show="parseInt(member.price) <= parseInt(member.amount)" >
        <h2> CONTRIBUTORS {{member.price}} -- {{member.amount}}</h2>
    </div>
    <div class="subtitle"  ng-hide="parseInt(member.amount) <= parseInt(member.price)" >
        <h2> TOP CONTRIBUTORS  {{member.price}} -- {{member.amount}}</h2>
    </div>

so I started like this:

  <md-virtual-repeat layout-wrap class="toast" ng-repeat="member in members| filter:searchText | orderBy:orderByFunction" >
                                    <div class="subtitle"  ng-show="showContrib(member) == 1" >
                                        <h2> CONTRIBUTORS {{member.price}} -- {{member.amount}}</h2>
                                    </div>
                                    <div class="subtitle"  ng-hide="showTop(member) == 1" >
                                        <h2> TOP CONTRIBUTORS  {{Number(member.price)}} -- {{Number(member.amount)}}</h2>
                                    </div>
                                    <md-whiteframe class="md-whiteframe-z3 frieed" style="margin:6px; padding: 19px;" flex-sm="35" flex-gt-sm="25" flex-gt-md="20" layout layout-align="center center">
                                        {{ member.amount}}
                                    </md-whiteframe>
                                </md-virtual-repeat>

with this js code:

   $scope.showTop = function(member){
        if($scope.topShow == 1){

            return 0;
        }
        if(parseInt(member.price) < parseInt(member.amount)){
    console.log('came here price');
             $scope.topShow = 1;
            return 1;

        }
        return 0;

};
    $scope.showContrib = function(member){
         $scope.conShow = 1;
//        console.log('price='+member.price+"amount"+member.amount);
        if($scope.conShow == 1){
            return 0;
        }
        if(parseInt(member.price) == parseInt(member.amount)){
           $scope.conShow = 1;
            return 1;

        }
        return 0;

};

Then I switch to the first part to try to troubleshoot.

Answer 1

You can not use parseInt, instead I would like to use *1 to make it int.

<div class="subtitle"  ng-show="member.price*1 <= member.amount*1" >
    <h2> CONTRIBUTORS {{member.price}} -- {{member.amount}}</h2>
</div>

Answer 2

parseInt won't work in the view.

View works only on scope's property.

Create a comparer method on scope then call it from view.

Try like this

$scope.isGreater=function(a,b){
  return parseInt(a) <= parseInt(b);
}

view

<div class="subtitle"  ng-show="isGreater(member.price,member.amount)" >
    <h2> CONTRIBUTORS {{member.price}} -- {{member.amount}}</h2>
</div>
<div class="subtitle"  ng-hide="isGreater(member.amount, member.price)" >
    <h2> TOP CONTRIBUTORS  {{member.price}} -- {{member.amount}}</h2>
</div>

Answer 3

You cannot parseInt as it is in your template.

Only elements(functions, variables) belonging to the scope of the controller can be used in the controller's template.

For using parseInt in the template, assign window object's parseInt to the controller's scope:

$scope.parseInt = window.parseInt;