Monitoring modifications in the child elements' status

As a newcomer to AngularJS, I am facing a challenge that requires your expertise. I have a table with numerous columns and input fields. My goal is to mark the row as 'edited' whenever a user modifies the value of an input field. Currently, I have implemented this functionality by including the ng-change directive in each individual input element:

<table>
   <tr data-ng-repeat="item in vm.Model.data">
      <td>
         <input type="text" ng-model="item.Title" ng-change="item.changed=true" />
      </td>
      .
      .
   </tr>
</table>

However, this approach becomes cumbersome due to the high number of columns, requiring me to manually add the ng-change directive to each 'input' element. Is there a method to capture the change event of any input element at the 'tr' level?

javascriptangularjs

Answer №1

If you need a custom directive that can listen for the onchange event bubbling (ngChange won't do the job here), you can create one like this:

.directive('onChange', function() {
    return {
        link: function(scope, element, attrs) {
            element.on('change input', function() {
                scope.$eval(attrs.onChange);
                scope.$digest();
            });
        }
    };
});

Then, use it in your code as follows:

<tr data-ng-repeat="item in data" on-change="item.changed=true">

Check out the demo here: http://plnkr.co/edit/lzIQ00l7aqXYlNCekWY8?p=preview

Answer №2

To implement a solution, I would establish a function within my item structure labeled IsModified which can provide either true or false results. This will be crucial in assessing the "edited" status of the item. The function will operate by examining the $dirty state of each relevant property within the item to ascertain whether any modifications have been made or not.

For instance...

return ($scope.item.Title.$dirty || $scope.item.FirstName.$dirty);

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

Best practice for verifying if a form is empty in Ember.js

My form includes HTML5 validation implemented in the following way: <script type="text/x-handlebars" id="project"> <div class="row"> <div class="span6"> <div class="well well-small"> <p s ...

javascriptajaxformsember.js

retrieve the value from the angularfire database list subscription

I need help with calculating the total sum of 'amount' values in my 'expenses' list. Take a look at my database: https://i.sstatic.net/lN3OQ.gif Although the log inside the subscribe function correctly shows a total of 1700, I'm ...

javascriptangularfirebasefirebase-realtime-database

Tool to insert content into the initial subdirectory

My goal is to develop a bookmarklet that can add text after the main domain but before any subpath. For example: http://example.com/home/start -> http://example.com/text/home/start I am considering storing the full path, removing the domain, replacing ...

javascript

Is it possible to have the ShowHide plugin fade in instead of toggling?

I'm currently utilizing the ShowHide Plugin and attempting to make it fade in instead of toggle/slide into view. Here's my code snippet: showHide.js (function ($) { $.fn.showHide = function (options) { //default variables for the p ...

javascriptjqueryshow-hide

What could be causing the if/else block in my Redux Toolkit reducer to malfunction?

I'm currently working on a shopping cart feature where I need to increase the quantity of an item if it's already in the cart. If the same item with different sizes is added, they should be displayed separately. I've successfully implemented ...

javascriptreactjsreduxreact-reduxredux-toolkit

Is there a problem with getting a ' ' between delimiters when parsing JSON in Node Express?

When making an Ajax request to an express endpoint, my code looks like this: var postData = { method: "POST", url: "/order/address", data: { order: JSON.stringify(addressFields) }, cache: false }; updateAjax = $.ajax(postD ...

javascriptnode.jsjsonparsingstringify

Data is persisted in the database even when an error occurs

When a user submits their Permanent Account Number (PAN), I check if it already exists in the database. If it does, I receive an error message stating that the PAN number is already registered. However, if I ignore the error and proceed without changing th ...

javascriptphpajax

Can I render rows and cells in a table using v-for twice in Vue?

I am eager to utilize Vue in order to display a table with rows, while having the cells as a component. I have created a functional example showcasing the desired end result along with some code outlining my approach: HTML <div id="app"> ...

javascriptvue.js

What is the best way to determine the P/E ratio for a specific stock?

Need help with a formula calculation. I have the value for net worth, but I am having trouble iterating over the EPS values and multiplying them by the shares held. Can anyone suggest a solution? Thank you! You can find the Plunker here <div&g ...

javascriptangularjs

Waiting for the `page.evaluate()` method in Node.js Puppeteer---Is there a way

I am facing an issue where I need to wait for the scrolling action to finish before resolving. When I placed resolve() inside the page.evaluate() block, I encountered an error stating: (node:22646) UnhandledPromiseRejectionWarning: Error: Evaluation failed ...

javascriptnode.jsasynchronouspuppeteeres6-promise

Tips for updating comments using ajax technology

I need to implement AJAX in order to update the page automatically whenever a new comment is added, eliminating the need to manually refresh the page. I have attempted to achieve this by adding a section of code but it's not working as expected. Even ...

javascriptphphtmlajax

Dealing with null route parameters for Express applications

I am facing a challenge in handling an empty route parameter when a path is not specified. My intention is to return a new date if the route parameter is empty. However, the server's response so far is: Cannot GET /api/timestamp/ app.get("/api/timest ...

javascriptapiexpress

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

I'm diving into the world of React and facing a challenge with multiple radio buttons that have associated input fields, like in this image: https://i.stack.imgur.com/Upy3T.png Here's what I need: If a user checks a radio button with a ...

javascriptreactjstypescriptjsx

Is it possible to run a blank Cordova app in a browser? It might be due to the lack of necessary environment or operating system compatibility for this project to run smoothly

While following the Get Started tutorial on , I encountered an error despite meticulously adhering to the instructions. Here are the steps I took: npm install -g cordova cordova create myApp cd myApp cordova platform add browser cordova run browser Howev ...

javascriptnode.jswindowscordovabrowser

embed a hyperlink onto a live video at a designated moment within an HTML document

Can anyone help me figure out how to overlay a link over a video playing at a specific time on an HTML page? I know it's easy to do on Youtube, but I need to accomplish this task without using Youtube. :) Thank you in advance for any assistance! ...

javascripthtmlcssvideo

Developing Online Shopping Platform with Angular 2

Seeking guidance on selecting the best platform for developing an intermediate to big scale E-commerce system. Currently, we primarily use Codeigniter and sometimes Angular. Interested in exploring the option of using Angular 2 for this project, but still ...

angularjscodeignitere-commerce

Retrieving the current page in Vue.js

When working with Vue, I use the following code for pagination: <b-pagination :total-rows="props.total" first-number last-number align="right" prev-class="prev-item" next-class="next-item" class=&quo ...

javascriptvue.jsvuejs2

Dynamically populate content on render in Vue.js based on the vue.router parameters

Can anyone help me understand why I'm receiving unexpected results? I am using v2 vue.js. In my project, I have a single file component for a Vue component. The component is supposed to render data imported from "excerciseModules" in JSON format. Th ...

javascriptvue.jsvuejs2vue-componentvue-router

Transmitting the values of my CheckBox list to a JSON file

Here is an interesting question that I have encountered. I created a drop box list using ng-repeat. Take a look at the code below: <ul> <li ng-repeat="item in formLIST.ContractType"> <input type="checkbox" ng-click="checkItems(item)" ...

javascriptjsonangularjscheckbox

Issue with jsPDF: PNG file is either incomplete or corrupted

I'm encountering an issue while attempting to pass Image data to the addImage function. I have tried downgrading the versions of jspdf and html2canvas, as well as experimenting with different ways to import the two libraries, but the problem still per ...

javascriptangulartypescriptjspdfhtml2canvas