ng-show always displays something

Why does the following code always evaluate Top contributors as true and Contributors as false, even though I can see the member.price and member.amount change? Does anyone have an idea of 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>

I made some changes here:

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

And added this JavaScript 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;

};

Now, I'm going back to troubleshoot the initial part of the code.

Answer №1

A better alternative to using parseInt is to multiply by 1 in order to convert it to an integer.

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

Answer №2

parseInt will not be effective in the view.

The view is designed to work only with scope properties.

To solve this issue, create a comparison method on the scope and then reference it in the view.

You can do it like this:

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

In the 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

It's not possible to directly use parseInt in the template you're working on.

The controller's template can only utilize elements (functions, variables) that are within the controller's scope.

To make use of parseInt in the template, you need to assign the parseInt function from the window object to the controller's scope:

$scope.parseInt = window.parseInt;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for adding npm dependencies that are not included in the package.json file during installation?

I am facing an issue with running npm install. I need to install all the dependencies used in my project. In my project files, there are various instances like const mongo=require('mongoose') and const morgan=require('morgan'), even tho ...

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

Utilizing MVC and AngularJS in a Single Page Application

I am embarking on my very first Angular application, which will function as a single page application in conjunction with MVC. Attempting to create a sample application featuring two links has presented some challenges, detailed below. I have opted for the ...

Fetching information from a data object using asyncData in Nuxt

Is there a method to retrieve object properties as keys from the asyncData() function? data() { return { bookmark_btn: { status: null, loading: false } } } I attempted to access data object properties in the following ...

Include a hyperlink within every row - ngx-datatable

I am brand new to using Angular. My goal is to have a link on each row of ngx-datatable that directs me to another page when clicking on the first column of each row. This new page should be based on the row id. For example, if I have a table listing cours ...

Adding elements to an array or object in JavaScript using the same key for each item

I am currently using DataTables and attempting to dynamically generate the "aoColumns" values in order to avoid hard-coding them. After trying out a particular approach, it appears that I may be incorrectly overwriting the same key in each row rather than ...

Retrieve a property from an object in Javascript without the need to declare it separately

I am dealing with an array of objects that requires looping through to create a new object with different properties. The issue arises when attempting to access a property before it is actually declared. Here is the original object: let data = [ { & ...

Navigating to the home page when a user is logged in using react-router-dom v6 in ReactJS

I am trying to restrict access to certain routes based on whether the user is logged in or not. If a logged-in user tries to go to /login, I want to redirect them to the home page; otherwise, they should be redirected to the login page. Currently, I am wo ...

Encountered a type error while attempting to render and define table columns within a material table component in

Hey there! I'm currently using the Material table to create a table view, and here are the columns that I have defined: const columns: TableColumn[] = [ { title: 'TYPE', field: 'type_of_action', highligh ...

`Toggle admin functionality in Rails using a checkbox`

I have a parent table with an admin and superadmin field. The superadmin has the ability to assign other parents as admin or superadmin. I am looking to add checkboxes next to each parent in the list, where checking a box indicates that the parent is an ad ...

Regular expression: Strip the brackets from a portion of the text

I have a JavaScript application where I need to manipulate strings. The text follows this structure: It might begin with a prefix in square brackets [prefix]. I have to preserve this prefix with the brackets. Next comes [whatever string], in this case I ...

Changing a string into a JavaScript date object

I am encountering an issue where I have a string retrieved from a JSON object and attempting to convert it to a JavaScript date variable. However, every time I try this, it returns an invalid date. Any insights into why this might be happening? jsonObj["d ...

Tips for saving information from a textarea into an HTML file

I have a unique question regarding the usage of $fopen and $fwrite functions. My goal is to include a button named "save as HTML" below a textarea. Upon clicking this button, I want a popup box to appear mimicking the 'save as...' dialog window ...

What is the best way to align the left div with the right div?

Here's the challenge: I want to make the left div stretch to the height of the right div https://i.sstatic.net/R3MCY.png and here's the desired outcome https://i.sstatic.net/UAXWC.png Currently, I'm implementing this using bootstrap < ...

What methods can I employ to utilize PHP or JS/HTML for posting to two separate URLs simultaneously?

Is it possible to submit a form from one button to two different locations? I am looking for a solution to achieve this. After clicking the submit button on a form, the form tag looks like this: <FORM ACTION="http:site.com/servlets/RequestServlet" met ...

What is the best way to extract specific information dynamically from an array of objects?

Scenario I have written code that successfully reads a local JSON file and converts it into an object. This part of the code is functioning flawlessly. My aim now is to develop a function that requires two inputs: The filepath of the JSON file to be con ...

Custom AngularJS directive for validating date input forms

My current project involves an Angular 1.5.3 app. This is the task at hand: I have a user form with two date input fields. I need to implement custom validation on the form so that if the "expiry date" is greater than the "effective date", an error messa ...

How can you troubleshoot code for object selection in Three.js?

I'm currently encountering an issue with object picking in my Three.js app. Some objects are not being intersected by rays, but only under certain camera rotations. I am working on debugging the code and trying to visualize the ray. Within my code (c ...

Guide for deploying a Svelte front-end and a Node back-end on Heroku

I have developed a test app using Svelte and now I am looking to deploy it live on Heroku. However, I am facing issues in serving it up properly on Heroku. As someone new to testing and experimenting with these technologies on my own, I tried configuring t ...

Occasionally, Soundmanager 360Ui fails to initialize after a page refresh

As I try to set up a 360Ui audio player using soundmanager 2, I encounter an issue. Upon the initial page load, the players display correctly as expected. However, if I refresh the page with Ctrl+R or by clicking the refresh button, it seems that soundmana ...