Mastering the ng-if directive in Angular can help you easily display or hide content based on boolean

Having trouble figuring out what to insert in the last span element where it mentions "I_DO_NOT_KNOW", here is the markup provided:

<div class="row">
  <div class="key" translate>Label</div>
  <div class="value form-group">
    <input id="myId"
            class="form-control"
            type="text"
            name="nameAttrFoo"
            ng-model="vm.myModelValue"
            ng-blur="sanitizeInput(vm.myModelValue)"
            required 
    />
    </div>
<div class="value form-group pull-right" ng-hide="formName.nameAttrFoo.$untouched">
    <span class="note note-error"
            ng-show="formName.nameAttrFoo.$error.required"
            ng-hide="formName.nameAttrFoo.$dirty">
        Required field!
    </span>
    <span class="note note-error" ng-if="I_DO_NOT_KNOW">
        Number exceeds the maximum prime value!                
    </span>
</div>

and here is the comparison function that returns true or false:

var boolie = false;
$scope.sanitizeInput = function(myModelValue) {
    var toInt = parseInt(myModelValue);
    var primeNr = 2147483647;

    if (toInt > primeNr) {
        boolie = true;
    } else {
        boolie = false;
    }
}

struggling to display the user-feedback line "Number exceeds the maximum prime value!" in the ng-if="I_DO_NOT_KNOW", any assistance would be greatly appreciated.

Answer №1

To implement the functionality, you can simply add the variable boolie to the scope like so:

$scope.boolie = false;
$scope.sanitizeInput = function(myModelValue) {
    var toInt = parseInt(myModelValue);
    var primeNr = 2147483647;

    if (toInt > primeNr) {
        $scope.boolie = true;
    } else {
        $scope.boolie = false;
    }
}

Following that, you can use:

<span class="note note-error" ng-if="boolie">

If you prefer not to set boolie in the scope, you can directly call your function. However, since it is already triggered on the blur event, it may not be ideal:

<span class="note note-error" ng-if="sanitizeInput(vm.myModelValue)">

Hopefully, this solution proves helpful ;)

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 most effective method for populating an array with all images from a particular directory?

I recently installed a pdf viewer plugin on my website (check it out here: ), and I have a question regarding its functionality. I am looking to include approximately 60 - 70 pages in this flip book, but I am unsure of how to proceed. I have attempted var ...

What is the best way to showcase information from a JSON file using AngularJS?

I have a JSON that looks like the following: { "count": 67, "0": { "id": "2443", "name": "Art Gallery", "category": { "id": "2246", "name": "Gifts & Memories" }, "deckLocation": [ { "id": "2443", ...

Node js server for world's warm greetings

I have been attempting to utilize Node.js for hosting a web server on a dedicated PC, but unfortunately I am unable to access it from anywhere outside of my local network. After researching online, the general consensus is that all I need to do is enter t ...

Error in test runner: Cannot convert type 'Cucumber' to type '? extends Runner' in Java cucumber

I'm currently working on setting up the Cucumber framework using Java for running my tests, but encountering a type mismatch error in the Test Runner. package cucumbertest; import org.junit.runner.RunWith; import cucumber.api.CucumberOptions; import ...

The routes may be the same in both React Router Dom v6, but each one leads to a different

I am struggling to set up different routes for navigation and I'm not sure how to do it. Here is what I have attempted so far: const router = createBrowserRouter( createRoutesFromElements( <> <Route path="/" element={<NavB ...

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

I have a challenge where I am moving a DIV from a hidden iFrame to the top of a page using jQuery. Here is my current code: $(document).ready(function($) { $('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer" ...

Issue with Material UI: An invalid value was detected for the select component, even though the value is within the available options

I am facing an issue with a dropdown list component using material UI. The dropdown is populated by an API call and displays a list of departments with their corresponding IDs and names. Upon selecting a record from a table, the department name associated ...

What is the purpose of setting the Z-Index on a Popper menu

If you want to see a live example demonstrating the issue, head over to codesandbox.io. My goal is to create a 'sit below' menu just like it's shown in the Material-UI documentation here. return ( <div className={classes.root}&g ...

Display the message "Please complete all required fields" on the AngularJS href when the necessary fields have not been filled out

Is there a way to implement input validation so that when a user clicks on a href link without filling out the required input fields, they see a message prompting them to fill in the fields? I tried changing the href to a button and it worked, but that&apo ...

Limiting zero is ineffective when it comes to pop-up issues

Hey there, I'm looking to prevent users from inputting zero and dot in a specific field, which is currently working fine. However, when the field is within a pop-up, the code below doesn't seem to work. <script> $('#name').keyp ...

steps for setting up socket.io client

Would it be possible to reference the socket.io client library using a relative path like: src="/socket.io/socket.io.js" instead of the absolute path: src="https://miweb:6969/socket.io/socket.io.js" To establish a connection with the library, typically ...

Send data from input to controller without using $scope

I am encountering an issue with the code below. Typically, I would resolve this problem using $scope, but this time I have been asked to find a solution without utilizing $scope in the controller. I am implementing the "controller as" syntax for managing ...

The process of converting a data:image base64 to a blob is demonstrated in this code snippet

Seeking a way to convert data:image base64 URLs to blob URLs. Below is the original code that generates the base64 URLs: <script> $(window).load(function(){ function readURL() { var $input = $(this); var $newinput = $(this ...

Encountering a parsing issue: an unexpected token was found, expecting "," instead

I'm encountering a Parsing error that states: Unexpected token, expected ",". I've been unable to pinpoint where the missing "," is located. Please refer to the image below for the exact line of the error. const cartSlice = createSlice({ name ...

The dangers posed by vulnerabilities in the React library

Hi there, I just finished setting up react-redux and noticed some vulnerabilities showing up in my console - both low and high. Can anyone explain what this means and if I should consider uninstalling it? ...

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

How can one access a client instance that has been generated using the $create method in ASP.NET AJAX?

I've utilized the client-side ASP.NET AJAX library to create a client component instance using the $create shortcut method. The object is linked to a DOM element, but I'm struggling to find a way to reference the instance since it's not regi ...

Utilizing Online Resources for Texturing in Three.js

Struggling with adding textures in Three.js. I've encountered issues using local images in Chrome due to security concerns, so I'm interested in applying web images instead. Is there a method to attach an image from a URL to a Three.js mesh? ...