How can I prevent ng-blur from triggering when ng-readonly is set to true in AngularJS?

I am currently working with AngularJS and have run into an issue when combining ng-blur with ng-readonly. Even though ng-readonly is set to true, ng-blur still triggers (if the input field is clicked and then somewhere else is clicked).

In this example, ng-blur will still trigger to increment the counter.

Link to the sample code

Code snippet in app.js:

$scope.counting = function(){
  $scope.count++;
}

Code snippet in index.html:

<input
ng-blur="counting()"
placeholder="sample"
ng-readonly="true"
>

Question: How can I prevent ng-blur from triggering when the ng-readonly condition is true?

Answer №1

To ensure that the counting() function is only called when the ng-readonly condition is false, you can use logical && within the ng-blur attribute.

<input ng-init="checked=true" 
        ng-blur="!checked && counting()" 
        placeholder="sample" 
        ng-readonly="checked"> 

In addition, you have the option to either initialize the value of ng-readonly using ng-init, or bind it to a checkbox.

For a demonstration, check out this Plunker example.

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

having difficulty altering a string in EJS

After passing a JSON string to my EJS page, I noticed that it displays the string with inverted commas. To resolve this issue, I am looking for a way to eliminate the inverted comma's and convert the string to UPPERCASE. Does anyone know how to achiev ...

"Transforming an array using the map method to generate an object containing arrays optimized for

I'm looking to extract an array of objects from a nested array within JS/React. I attempted the following approach, but it resulted in an error regarding react children - indicating that objects cannot be rendered as children and suggesting the use of ...

Substitute the functions within a Node.js module with simulated functions

I am currently working on a Node.js project that serves as an API wrapper. To ensure the reliability of my code, I am writing unit tests using nodeunit and need to incorporate mock functions into the module. For instance, I require a function that mimics s ...

How to arrange data in angular/typescript in either ascending or descending order based on object key

Hey there! I'm fairly new to Angular and have been working on developing a COVID-19 app using Angular. This app consists of two main components - the State component and the District component. The State component displays a table listing all states, ...

Entwine words around an immovable partition

Is it possible to create an HTML element that remains fixed in place even as the content on the webpage changes, with everything else adjusting around it? I am looking to add a continuous line that spans across a dynamic webpage. No matter how much conten ...

React modules imported in ES6 not functioning as anticipated

I'm currently facing a problem when trying to import a react class into a container. The structure of my files is as follows: ├── components │ ├── Header │ │ ├── Header.js │ │ └── index.js │ └── ...

Divide and Insert a Gap in Phone Number

I need help formatting a telephone number so that there is a space between every third and seventh character. var phoneNum = "02076861111" var formattedNum = [phoneNum.slice(0, 3), phoneNum.slice(3,6), " ", phoneNum.slice(6)].join(''); console ...

How can I activate JQUERY when an event occurs?

I am trying to create a selection box where, upon clicking an item on the left, it will shift automatically to the right. However, I am facing issues with using triggers to achieve this functionality. Here is the code I have written. <script type="te ...

Can "Operator" be used as a function parameter?

Take a look at this code snippet: const myFunction = (x, y, z) => { //Some code here }; $('whatever').on( event, function(){ myFunction( event.originalEvent && event.originalEvent.target ); //What is this operator doing? }); Can yo ...

Ways to retrieve every element inside a specific div container

Is there a way to select all elements inside a div except for specific ones? For example, consider the following structure: <div id="abc"> <div class="def"> sagar patil</div> <div class="pqr"> patil</div& ...

Improving Visibility in AngularJS

I am new to using Angular and encountering a simple issue. I have a button that, when clicked, should reveal a grid and some hidden filters. The filters are structured like this: <div ng-show="filtroFilial" style="visibility: hidden" class="col-md-2"&g ...

Javascript handling scrolling and repositioning

When using the scrollBy() method in the window object of JavaScript, there are two arguments required. But what do these arguments actually represent? The resource I am currently studying from states that it is "the number of pixels to scroll by," but I am ...

Is there a way to attach a hidden input to the file input once the jquery simpleUpload function is successful?

Attempting to add a hidden form field after the file input used for uploading a file through the simpleUpload call. Here is the HTML (loaded dynamically): <div class="col-md-6"> <div class="form-group"> ...

What is the method for determining the number of unique tags on a webpage using JavaScript?

Does anyone have a method for determining the number of unique tags present on a page? For example, counting html, body, div, td as separate tags would result in a total of 4 unique tags. ...

Identify the row containing a value of null using jQuery (functionality not performing as anticipated)

Whenever the user clicks on the GetData button, I retrieve JSON data and display it in an HTML table similar to the demo below. Demo: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview There are instances where the value can be null, such as the loanNu ...

Using a Component's Variable in Another Component in React Native

Hello there! Thank you so much for offering your help. I have a component called PlayerWidget and would like to utilize its state variable isPlaying value in the AlbumHeader Component. Here is the code for the PlayerWidget: import React, { useContext, use ...

Creating child rows with forms in Datatables

Currently, I am utilizing this particular example where I have a form embedded within the child rows. However, I have encountered an issue - the input from the child rows is not being submitted if the child rows are closed. Upon further examination, I noti ...

Denied running the inline script in Redocly

Experimenting with redoc-cli (https://github.com/Redocly/redoc/) in order to generate static documentation. Unfortunately, encountered some stumbling blocks due to errors related to the Content-Security-Policy, which seems to be blocking JavaScript code ex ...

Node.js request.url is returning incomplete URL

I am currently testing out the code snippet provided in a beginner's book on Node.js. var http = require("http"); var url = require("url"); function onRequest(request, response) { console.log("request URL is: " + request.url); var pathName ...

Creating an interactive element in Angular: A step-by-step guide

Hey there, I'm facing a problem with creating a specific payload structure as shown in the example code snippet below. Everything was going well until I got stuck at the dynamic form part, and despite several attempts, I can't seem to figure it o ...