Updating input values in AngularJS using a custom directive in AngularJS

When the value of an input does not meet a certain condition, I need to change it. In this example, if the unit price input is changed to a non-numeric value when adding a Detail, I want to set the value to "0.00".

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
  if ( isNaN(newValue) ) {
    scope.item.price = "0.00";
    console.log("isn't numeric");
  } else {
    console.log("is numeric");
  }
});

The issue arises when changing the value of "scope.item.price", causing both "isn't numeric" and "is numeric" messages to be printed. Is there a way to change the input value without triggering scope.$watch twice?

javascriptangularjsangularjs-directiveangularjs-scope

Answer №1

To closely monitor changes in the invoice.items object, I suggest using a deep $scope.watch function:

  $scope.$watch('invoice.items', function(){
    $scope.subtotal=0;
    angular.forEach($scope.invoice.items,
    function(item) {
      $scope.subtotal += item.qty * item.price;
    });

    $scope.igv= $scope.subtotal * 0.18;

    $scope.total=$scope.subtotal  + $scope.igv;

  }, true);

You can view a live example on Plunker http://plnkr.co/edit/5rzjeIG0C76a8l0ZAp4u?p=preview , where you'll notice the inclusion of true at the end for enabling deep watch functionality.

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

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

javascriptcssnext.jssassnext.js13

Executing a function upon the completion of image loading

I'm currently working on an Ionic application where I need to dynamically resize an image and its associated map area once the image has finished loading. However, I am unsure about which directive to use for this task as ng-init does not seem to be t ...

angularjsionic-framework

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

I'm encountering an issue with updating the gridview TypeError: $.fn.yiiGridView is undefined; after using AjaxLink Click Button for Refresh <script> $(document).ready(function(){ $("#tombol_refresh").click(function(){ $.fn.yiiGridView ...

javascriptphpajaxyiimodel

Using Javascript and Regular Expressions to separate and preserve the delimiter

I'm facing an issue with my regex that splits a string into arrays. Everything is working smoothly except for the fact that I want to retain part of the delimiter. This is the regex I am using: (&#?[a-zA-Z0-9]+;)[\s] In my JavaScript cod ...

javascriptregexdelimiter

Using a JavaScript variable in a script source is a common practice to dynamically reference

I have a scenario where an ajax call is made to retrieve json data, and I need to extract a value from the json to add into a script src tag. $.ajax({ url: "some url", success: function(data,response){ console.log("inside sucess"); ...

javascriptjqueryjsonajax

The issue of jQuery, Ajax, and MVC6 parameters becoming null after an Ajax request has been identified

Hello everyone, I am a beginner in asp.net core, c# and MVC 6. Currently, I am facing an issue with sending data over ajax to my controller. function sendAjaxData() { $.ajax({ url: "AjaxWithData", // using hardcoded value for testing purpose type ...

javascriptjqueryajaxasp.net-core-mvc

How can I manually transclude content within a directive into two separate locations?

When trying to access the result of ng-repeat, I discovered that using the transclude function and manually compiling could help. However, this method does not work in situations with two places and elements containing ng-repeat. Here is how my code is str ...

javascriptangularjsangularjs-directive

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

Currently, I am troubleshooting a challenge in my Angular application that involve TypeScript. The issue lies within a method in a TypeScript class: findArtistBidsAppliedByCurrentWall(bid):Observable<Bid[]> { console.log("findArtistBidsApplied ...

javascripttypescript

Retrieving variables using closures in Node.js

I have been developing thesis software that involves retrieving variables within closures. Below is the code snippet written in node.js: var kepala = express.basicAuth(authentikasi); // authentication for login function authentikasi(user, pass, callback ...

javascriptnode.jsmongodbauthenticationexpress

NextJS: Issue: Accessing a client module from a server component is not allowed. The imported name must be passed through instead

My current NextJS setup is structured as shown below: app/page.js 'use client'; import React from 'react'; export default function Home() { return (<div>Testing</div>); } app/layout.js export const metadata = { title ...

javascriptreactjsnode.jswebpacknext.js

A guide on organizing nested object data in react-native

{ "crocodile":{ "age_in_years":"20", "name":"snapjaw", "country":"australia" }, "jaguar":{ "age_in_years":"8", "name&q ...

javascriptreactjsreact-nativejavascript-objects

Transclusion with multiple slots in AngularJS

Attempting to incorporate a component in AngularJS 1.5.8 with multi-slot transclusion. The test performs well when utilizing a directive, however, with a component, it appears that the slot cannot be located!. This is how the component is declared app. ...

javascriptangularjsangularjs-componentsangularjs-ng-transclude

The Rtk query function does not generate endpoints

Having trouble with code splitting in RTK-query, it's not working for me and I can't figure out why App.jsx import React from "react"; import { Provider } from "react-redux"; import store, { persistor } from "store" ...

javascriptreactjsreduxredux-toolkitrtk-query

Initializing Angular variables

My Angular controller has a variable called $scope.abc. The backend I'm using is Sails. The initial value of $scope.abc can be set by the backend when the page is first generated. Once the page is displayed, the user may or may not change this value ...

javascriptangularjssails.js

Is it possible to modify the appearance or behavior of a button in a React application based on its current state?

I'm looking to customize the color of a button based on different states. For example, if the state is active, the button should appear in red; otherwise it should be blue. Can anyone suggest how this can be achieved in React? Furthermore, I would als ...

javascriptreactjsfrontend

The jquery layout is experiencing issues when being loaded within the ui-view

I encountered an issue with my layout created using JQuery layout. Everything works perfectly in a normal index file, but when I try to load it through the ui-view directory, it fails to load. Can someone provide assistance? My index.html <html ng-app ...

angularjsuiview

Guide on creating and dynamically appending an element to the DOM in VueJS triggered by a user clicking a button

I'm having an issue with my vue webapp. I want to make a square shape appear on the screen where a user clicks, but for some reason, my code isn't working as intended. Can someone help me figure out what's wrong? <template> <di ...

javascriptvue.jsrendercreateelement

Data is successfully being stored in an array in AngularJS, however, it is not appearing in the user interface

Having an issue with displaying updated data on my UI. I am successfully pushing data into the database and an array using Angular 2-way binding. The data is being pushed as confirmed by the console, but it's not showing up on the user interface. Con ...

javascriptarraysangularjs

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

In the process of creating a simple Electron application that facilitates user login into a system, I encounter an issue. The app collects the username and password entered by the user through form text inputs. Upon clicking the "login" button, the program ...

javascriptnode.jshttpscrashelectron

Troubleshooting issue with C# Ajax success response not triggering alert

I am facing an issue where the alert box for success does not show even though the code successfully inserts contact details using ajax and C#. Strangely, when I debug through the JavaScript debugger in Chrome, the alert pops up as expected. Here is the co ...

javascriptc#jqueryajax