Clearing the ng-model value in a controller following an ng-change event

Question

Clearing the ng-model value in a controller following an ng-change event

Is there a way to reset the ng-model value in the controller after an ngChange event without needing to use a directive?

<div ng-repeat="i in items">
    <!-- Some DOM comes here -->

    <select ng-model="i.avail" ng-change="changeAvail(i.id, i.avail)">
        <option value="true">Available</option>
        <option value="false">Unavailable</option>
    </select>

    <!-- More DOM follows -->
</div>

The JavaScript code in the controller is shown below:

$scope.changeAvail = function(itemId, value){
    if(confirm("You cannot undo this action")){
        //Send an ajax request to backend for an irreversible action
    }
    else{
        //Restore input to initial value;
    }
}

I prefer not to create a custom directive just for this specific scenario

javascript angularjs angularjs-ng-repeat angularjs-ng-model

Answer 1

Answer №1

It is recommended to store the previous values of items within the scope and use them later to revert back to the original state.

$scope.loadItem = function(){
    $http.get('/api/getitems').then(function(response){
        $scope.items = response.data;
        $scope.oldCopy = angular.copy($scope.items); // Store old values when setting items
    });
}

When triggering the ng-change method, pass the entire item like ng-change="changeAvail(i)"

$scope.changeAvail = function(item){
    if(confirm("You cannot undo this action")){
        // Save object
        $http.post('/api/data/save', item).then(function(){
            //alert('Data saved successfully.');
            $scope.loadItem(); // Update items from DB to ensure they are current.
        })
    }
    else{
        // Retrieve the previous object based on itemId and revert back to it.
        var oldItem = $filter('filter')($scope.oldCopy, {itemId: item.itemId}, true)
        if(oldItem && oldItem.length){
            item = oldItem[0]; // Replace with the first item in the array returned by filters.
        }
    }
}

Answer 2

It is recommended to store the previous values of items within the scope and use them later to revert back to the original state.

$scope.loadItem = function(){
    $http.get('/api/getitems').then(function(response){
        $scope.items = response.data;
        $scope.oldCopy = angular.copy($scope.items); // Store old values when setting items
    });
}

When triggering the ng-change method, pass the entire item like ng-change="changeAvail(i)"

$scope.changeAvail = function(item){
    if(confirm("You cannot undo this action")){
        // Save object
        $http.post('/api/data/save', item).then(function(){
            //alert('Data saved successfully.');
            $scope.loadItem(); // Update items from DB to ensure they are current.
        })
    }
    else{
        // Retrieve the previous object based on itemId and revert back to it.
        var oldItem = $filter('filter')($scope.oldCopy, {itemId: item.itemId}, true)
        if(oldItem && oldItem.length){
            item = oldItem[0]; // Replace with the first item in the array returned by filters.
        }
    }
}

Clearing the ng-model value in a controller following an ng-change event

Answer №1

Similar questions

How can I retrieve a global variable in Angular that was initialized within an IIFE?

Rendering images from Laravel's storage folder in a React component

Using .change(); in JavaScript code with jQuery does not trigger a function

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

What is the best way to prevent a draggable div from moving past the edge of the viewport?

Endless scrolling feature malfunctioning

What is the best way to invoke a function in a class from a different class in Angular 6?

Is there a way to display my array within my React component using JavaScript?

Is it possible to automatically adjust the cursor position in a textarea when the language is switched?

In a Vue serverless web application, OpenLayers Map object fails to trigger events

Is there a way to enlarge images when hovered using canvas?

The React.js component search test encounters errors in locating components

Waves emanating from the heart of rings

Vue.js Contact Form Issue: Error message - 'Trying to access 'post' property of an undefined object'

Locating the save directory with fileSystem API

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

Creating a response in Node JS

Implementing the Delete feature using AJAX in this specific scenario: What is the best approach?

Navigating through a JavaScript object array within another object

Unexpected behavior when trying to bind data with AngularJS through a response message