Trigger ng-change in AngularJS when modifying a data model

I designed a form that has the following structure:

<div class="col-xs-12 col-lg-4">
    <form name="deliveryForm" ng-class="{ 'has-error': deliveryForm.$invalid && !deliveryForm.contact.$pristine }">
        <div class="form-group">
            <div class="btn-group">
                <label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="true" ng-change="controller.setDeliveryDetails()">For delivery</label>
                <label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="false" ng-change="controller.findCollectionPoints()">For collection</label>
            </div>
        </div>

        <div class="form-group" ng-if="!controller.order.lines[0].forDelivery">
            <label class="control-label">Contact</label>
            <input class="form-control" type="text" name="contact" ng-model="controller.model.contact" ng-change="controller.setDeliveryDetails()" autocomplete="off" required />
            <input type="hidden" name="collectionPoint" ng-model="controller.model.collectionPoint" ng-change="controller.setDeliveryDetails()" required />
        </div>

        <div class="form-group">
            <label class="control-label">Instructions</label>
            <input class="form-control" type="text" name="instructions" ng-model="controller.model.instructions" ng-change="controller.setDeliveryDetails()" autocomplete="off" />
        </div>

        <div class="form-group">
            <button class="btn btn-default" type="button" ui-sref="saveOrder.lines">Back</button>
            <a class="btn btn-primary pull-right" ng-if="deliveryForm.$valid" ui-sref="saveOrder.confirm">Continue</a>
        </div>
    </form>
</div>

Upon inspection, it is evident that whenever the first line is not for delivery, both the contact input and the hidden collectionPoint input are displayed. Moving on, there is a link below that modifies the value of collectionPoint:

<a href="#" ng-click="controller.model.collectionPoint = point"></a>

I initially anticipated that the hidden input would detect the changes made and trigger the controller.setDeliveryDetails() method. Unfortunately, this does not seem to be working as expected. Is there any feasible way to accomplish this task?

Answer №1

When changes are made to an input, the ng-change event is triggered.

To handle this, you have a couple of options. One way is to call controller.setDeliveryDetails() using ng-click:

<a href="#" ng-click="controller.model.collectionPoint = point; controller.setDeliveryDetails()"></a>

Alternatively, you can set up a watch in your controller on controller.model.collectionPoint:

$scope.$watch(angular.bind(this, function () {
  return this.model.collectionPoint;
}), function (newVal) {
  controller.setDeliveryDetails();
});

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

ng-options incorporating various conditions

I am facing an issue with the filter on a select element in my code. The filter is currently set to exclude the 'public' string from an array under certain conditions. However, I have realized that additional conditions need to be met in order fo ...

Angular Routing with AngularJS Application

I'm working on an Angular Application and I have a question regarding the routing setup in my main.js file. Specifically, I am using a Bootstrap accordion menu and when I click on the next button, the following code is executed: <a href="#MainMenu ...

Having trouble deciding between JSON, XML, or using a database?

As I work on developing an app that involves sending an id and receiving a JSON node from PHP, I am considering the best approach for storing my data. Should I keep it as a static PHP array as shown in the code below, or should I save the data to an exte ...

Extract individual export icons from the React icon library

I've recently put together an icon package and am ready to share it with the world under the name @rct/icons. Here's a glimpse at my package.json: { "name": "@rct/icons", "version": "1.0.0", "sc ...

What is the best practice for retrieving data in a Reactjs application?

I've been working on a Reactjs app and have run into an issue regarding data fetching from Firebase. I'm unsure whether it's more efficient to fetch data in the root component (App.jsx) or in individual components. Currently, I have collect ...

Tips for building an interactive button with changing content and retrieving variable information when the button is clicked in an Angular framework

Received dynamic data from the server is shown below: { "data": [ { "id": 4, "first_name": "Eve", "last_name": "Holt", "lat":"25.6599899", "lng":"45.3664646", "status":"0" ...

Retrieve a single instance of every element within an array using JavaScript

I have an array of player objects, each containing properties such as "position" and "player_name". With 8 unique positions available for players, I aim to extract the first player for each position and transfer them to a new array. This way, the new array ...

"Two columns of identical width, each occupying 50% of the screen height

I am currently working on a design featuring two columns, each set to occupy 50% of the width. I am facing a challenge with ensuring that the height of these columns stretches to the full height of the screen, even when they are empty, so I can showcase th ...

Error: The variable "user" has not been declared in server.js when using passportjs

As a novice with limited experience and a tendency to borrow code snippets from various sources, I'm struggling to identify the root cause of the Reference Error: User is not defined. This particular error crops up when I try to input or submit a new ...

The statusMessage variable is not defined within the "res" object in a Node Express application

I am currently developing a Node.js & Express.js application and I am in need of creating a route to display the app's status. router.get('/status', function(req, res) { res.send("Current status: " + res.statusCode + " : " + res.stat ...

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

Having trouble with React throwing a SyntaxError for an unexpected token?

Error message: Syntax error: D:/file/repo/webpage/react_demo/src/App.js: Unexpected token (34:5) 32 | 33 | return ( > 34 <> | ^ 35 <div className="status">{status}</div> 36 <div className=&quo ...

What is the solution for resolving AngularJS URL encoding?

Currently, my AngularJS app utilizes a component known as navbar to house the searchbar along with a search() function. $scope.search = function (keyword) { console.log(keyword); $state.go('main', { keyword: keyword }, ...

Changing the css value using jquery is ineffective

When clicking the 'Design Custom Cables & Order Online' button, I aim to have the step 1 accordion content collapse and instantly expand the step 2 content. However, upon applying jQuery, the step 2 content does not expand immediately and the ste ...

Exploring the concept of inheriting AngularJS modules

I am intrigued by the behavior of AngularJS. I am wondering if AngularJS modules inherit dependencies from other modules. Let's consider the following structure: var PVNServices = angular.module('PVN.services', []); PVNServices.factory(&a ...

What could be the reason behind the unexpected behavior of my Bootstrap 3 carousel?

I'm attempting to replicate this visual effect in my own carousel, featuring semi-transparent images on the left and right sides. However, I'm encountering a negative result with my project when transitioning between slides at : here. This is th ...

Navigating through Vue Router with Dynamic Imports and Guards

I am looking to dynamically bring in data from a component file into a router file, and then allow the use of next() based on the value of the imported data. In my App.vue file, I am using this.$router.push({name: "Dashboard"}) when the data changes from ...

PHP Contact form submission does not require all fields to be filled out

I am facing an issue with my PHP contact form as it allows submission even if the fields are left blank. This has resulted in receiving multiple empty emails every day. How can I make sure that all fields must be filled out before the submit button can be ...

Tips for accessing the value of a dynamically created textbox using JavaScript

Hello everyone, I have a couple of questions that I need help with. I am currently working on developing a social networking website similar to Facebook. On this platform, there are multiple posts fetched from a database. However, I am facing an issue w ...

Turn off Closure Compiler formatting guidelines

I've inherited an old codebase that's been minified using Closure Compiler. As part of our efforts to modernize and optimize the code, we've set up a CI job to highlight any warnings or errors. However, some of these warnings are irrelevant ...