Currently, I have a situation where multiple forms are connected to a backend service for storing data.
My query is whether there exists a typical angular method to identify which properties of the model have been altered and only send those in the POST request. As of now, all data is being sent even if no changes have been made.
When considering the question at hand, there are two potential scenarios to address.
If a user fills out the fields and clicks on the SAVE button, a PATCH request will be sent to save/update the values.
As the user makes changes to the values, a request must be triggered.
Regarding the first scenario:
To keep track of any changes made, it is suggested to maintain a hashmap. Utilize the ng-modal directive for all user input fields.
Let's take, for example, two input fields: username and password.
<input type="text" ng-modal="username" />
<input type="password" ng-modal="password" />
In your controller:
$scope.userInfo = {
user: $scope.username,
pass: $scope.password
};
Any changes will automatically reflect in your views and models through two-way binding.
Now, you can compare the old and new values to determine which ones to send as needed.
For the second scenario:
Utilize Angular's watchCollection function.
scope.$watchCollection('[username, password]', function () {
// initiate a request
});
EDIT
It is possible to use a debounce method for the second approach.
// Returns a function that, when continuously invoked, won't trigger repeatedly unless specified time has passed.
_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
var last = _.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = _.now();
var callNow = immediate && !timeout;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
Source: https://github.com/jashkenas/underscore/blob/master/underscore.js
There isn't a one-size-fits-all method for this. Here's another approach that doesn't involve using watchers. By passing 'form' as an argument in the update function, you can identify which controls have been modified.
Check out this example on Plunker
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = {}
var formFields = ['firstName', 'lastName'];
$scope.update = function(form, user) {
$scope.updatedFields = {};
angular.forEach(formFields, function(field) {
if (form[field].$dirty) {
$scope.updatedFields[field] = $scope.user[field];
// Reset field to pristine state temporarily (demo purpose only)
form[field].$dirty = false;
}
});
};
}]);
You can use the same string for both input name and model.
<input type="text" ng-model="user.firstName" name="firstName"/>
I need help with implementing a footer in my React web app. Currently, the body section in index.html looks like this: <body> <div id="root"></div> <script src="index.js"></script> </body> Inside index.js, the rend ...
https://i.sstatic.net/O6okm.png I am seeking assistance with webapi and angular development. I am struggling to find a solution to my issue, so any help would be greatly appreciated. Additionally, if you have any recommendations for resources where I can ...
If you have multiple objects to add in ngrx state, how can you ensure they are all captured and kept in sync? For example, what if one user is associated with more than one task? Currently, when all tasks are returned, the store is updated twice. However, ...
Looking for some assistance with Angular and Google Maps. I have 5 markers on the map and would like to filter them based on the dropdown selection. Can anyone provide guidance? For example, if I choose "This is the best city in the world!" from the dropd ...
After referencing the answer found here: Upon implementing the $inject syntax, my controller code appears as follows: class MyCtrl { public static $inject: string[] = ['$scope']; constructor($scope){ // implementation } } // register ...
I utilized a bootstrap-compass project by using the yeoman generator provided in this link: https://www.npmjs.com/package/generator-bootstrap-compass You can view the file structure through the link mentioned above. Now, I am looking for guidance on cor ...
Dealing with a frustrating issue here. I've been working on an app and for the past few weeks, it keeps crashing unexpectedly. It seems to happen more frequently after saving my code to trigger a reload, but it can also just crash randomly while navig ...
My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions. Initial state of the two divs: https://i.sstatic.net/cWYyV.png Outcome after clicking on div 2: ...
It's puzzling to me why the size of the heap is twice as large as expected. I meticulously constructed a binary tree with perfection. I suspect v8 recognizes that each node consists of 3 fields. function buildTree(depth) { if (depth === 0) return n ...
I am currently developing a chrome-extension that has the ability to upload files to the user's Dropbox folder. I have implemented AJAX requests in my code to handle file uploads, and it is working fine for text-based file extensions such as .txt, .js ...
I encountered an issue after installing the https://github.com/yuanyan/boron library. The error message I received is: TypeError: Cannot read property 'string' of undefined Error details: push../node_modules/boron/modalFactory.js.module.expor ...
While navigating through our incredibly large and intricate AngularJS application, I stumbled upon a discovery that caught me by surprise. application.run(function($rootScope) { window.setInterval( () => { $rootScope.$digest(); }, 1000); }); Inter ...
Currently, I am working on the front end of a project using HTML, while utilizing Python for the back end. To handle communication between the two, I have integrated AngularJS. The challenge I am currently encountering pertains to retrieving responses fro ...
I am trying to create a HighStock chart using AngularJS and I want to be able to modify some chart options through buttons. However, it seems that making changes to the options does not automatically update the chart. I attempted to follow a solution for h ...
Is there a way to filter out certain items in an ng-repeat loop? For instance, consider the following simplified code snippet: <div class="row" data-ng-repeat="entry in data.feed.entry | orderBy:'gsx$timestamp.$t':true"> {{entry.gsx$jobID ...
I am currently experimenting with creating a basic Skybox using Three.js, but I've encountered an issue where the texture I'm applying to the cube is only visible on the outside and not on the inside. Below is the code for my skybox: const path ...
I am facing a challenge with my Protractor test as I need to send a post request to a Django server to insert a fixture. In order to make this post request, I must adjust the xsrf setting within my app: app.config(['$httpProvider', function($htt ...
I've developed a socket.io web app. When I click on the button to send a message, the message appears briefly but disappears when the page refreshes unexpectedly. How can I prevent this random refreshing and ensure that socket.io saves my messages? B ...
I am encountering an issue while trying to retrieve data from my server. The console doesn't provide any specific information about the error. My objective is to fetch JSON data from the server and use it to display the required information. I am util ...
Want to incorporate JQuery for DOM manipulation within Angular components, but only want it to target the specific markup within each component. Trying to implement Shadow DOM with this component: import { Component, OnInit, ViewEncapsulation } from &apo ...