Ways to trigger a function solely upon user input for field updates, excluding any automatic updates

In my view form.html, I have the following code:

Size <select ng-model="size" ng-options...>[1..20]</select>
Limiter <select ng-model="limiter">[1..20]</select>

Then, in the controller form.js, I added:

$scope.$watch("limiter", function(newVal, oldVal) {
  if (newVal !== oldVal) {
    size=Math.min(limiter,size);
  }
});

Everything was working well, but now I want to implement sizeMemory feature. The goal is to keep track of the original size so that if the limiter decreases the size, but it is then increased again, the size will return to its original value.

I attempted the following approach, but encountered an issue where the sizeMemory was also being modified whenever the limiter changed the size. I need to modify the size watch function to only trigger when the user manually sets a new value for size:

sizeMemory = size;
$scope.$watch("size", function(newVal, oldVal) {
  if (newVal !== oldVal) {
    sizeMemory=size;
  }
});
$scope.$watch("limiter", function(newVal, oldVal) {
  if (newVal !== oldVal) {
    wantedSize = Math.max(size,sizeMemory);
    size=Math.min(limiter,wantedSize);
  }
});

Answer №1

Simply utilizing the ng-change directive should suffice, as it will not trigger when the model is altered programmatically.

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 easiest method for querying one-to-many connections in Django?

Looking for a more efficient way to return a dictionary in JavaScript that includes data from both a Category table and Sub_category table. The desired format is 'Category1': 'Sub_cat1, Sub_cat2, ...'. Any ideas on a better approach? T ...

Some sections of the HTML form are failing to load

I'm currently following a tutorial and applying the concepts to a Rails project I had previously started. Here's my main.js: 'use strict'; angular.module('outpostApp').config(function ($stateProvider) { $stateProvider.sta ...

Having issues with your JQuery code?

I am attempting to locate a cell within a table that contains the class 'empty'. My goal is to then utilize a code snippet to obtain the id (cell number) and determine which cells are adjacent to it. As part of my test, I am experimenting with t ...

Tips for locating all events linked to a specific text box using JQUERY

I'm currently encountering a major issue with textboxes on a page that I've been tasked to update. Whenever I attempt to input text into the textboxes, the span element next to them disappears. My application is built using ASP.NET and relies on ...

Exploring the navigation features and states within the world of the Ionic framework

I am in the process of creating an app that saves information locally the first time it is used. My goal is for a different page to be displayed each subsequent time the app is opened. However, I am facing an issue with loading a simple page (not a templat ...

How to upload a document to Alfresco using JavaScript API

I am facing an issue while attempting to upload a file from a node application to my local Alfresco server. I have been able to login, create, and delete folders successfully, but I am encountering difficulties when trying to upload files. let AlfrescoApi ...

Tips for embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

Exploring the process of setting up a datasource for Select2 in October CMS using the integrated Ajax Framework

Looking to utilize the extensive AJAX framework provided by October CMS to populate a Select2 box with data. The process of using a remote dataset in Select2 involves the following steps: $(".js-data-example-ajax").select2({ ajax: { url: "https://a ...

Using Rxjs to reset an observable with combineLatest

My scenario involves 4 different observables being combined using "combineLatest". I am looking for a way to reset the value of observable 2 if observables 1, 3, or 4 emit a value. Is this possible? Thank you! Mat-table sort change event (Sort class) Mat- ...

Is it possible to dynamically append and delete rows of interconnected dropdown menus?

I'm currently working on a form that allows users to add and remove rows with cascading dropdowns for class selection. Everything is functional except for the feature to remove selected classes. I've experimented with different methods like the ...

Executing jQuery AJAX requests in a chain with interdependent tasks

I am struggling to grasp the concept of magic deferred objects with jQuery. Consider the following code snippet: function callWebService(uri, filter, callback) { var data = {}; if (filter && filter != '') data['$filter&apos ...

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on

Recently, I've been working on creating a virtual Rubik's cube using only JS and CSS on CodePen. Despite my limited experience of coding for less than 3 months, with just under a month focusing on JS, I have managed to develop two versions so far ...

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

What steps should I take to address the issue of fixing the classname rather than using the

<div ng-class:"{{myclass}}" role="progressbar" aria-valuenow="{{roundedtotalPerformanceCount}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( totalPerformanceCount + '%' ) }"> {{roundedtotalPerformanceCou ...

Obtaining personalized error messages from the backend with express: A step-by-step guide

I'm currently developing a Login App and I'm looking to implement custom error messaging on the Front End. Specifically, I want to display custom error messages when attempting to register with an email that is already in use or when entering a p ...

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Hey there, I'm currently working on a beginner project and could use some assistance. My project involves creating a basic BMI calculator using metric units, but I seem to be encountering issues with rounding numbers. Here is a snippet of my code: var ...

How to extract data from a JSON file using AngularJS

I have successfully managed to read the JSON content from a file in a Chrome app, but I am struggling to assign the returned JSON content to $scope.somevar. Every time I try to initialize $scope.somevar inside a method, it goes out of scope. SearchApp.con ...

Issue with AngularJS: When trying to log the scope property in the directive's link function,

I recently created a simple plnkr that showcases a basic "Hello, X" directive. Within the link function of this directive, I tried logging scope.name, however, it is displaying as undefined. Why is this happening? Shouldn't it be showing the value of ...

Best practices for implementing JavaScript in JSP pages

After researching various sources, I have come across conflicting opinions on the topic which has left me feeling a bit confused. As someone new to web programming using java EE, I am looking to integrate javascript functions into my code. It appears that ...

Determine the row index by identifying the row id and table id

I need to retrieve the Index number of a row when a hyperlink is clicked, while also passing additional data from this tag. <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"&g ...