When an AJAX request is successful in Angular, utilize the ng-hide directive

Question

When an AJAX request is successful in Angular, utilize the ng-hide directive

I've implemented a feature where double-clicking the name displays an input field, but I'm facing an issue with switching back after a successful put-request. Despite setting $scope.edit to false, it doesn't seem to work as expected. This is my first attempt at working with Angular today.

<ul>
    <li ng-repeat="customer in customers">
        <label>
            <input type="checkbox" ng-model="customer.selected"/>
        </label>
        <span ng-hide="edit" ng-dblclick="edit = true;">{{ customer.name }}</span>
        <label ng-show="edit">
            <input type="text" ng-model="customer.name" ng-keyup="editCustomer($index, customer, $event)"/>
        </label>,
        <small ng-bind="customer.created_at"></small>
        <button ng-click="deleteCustomer($index, customer)">-</button>
    </li>
</ul>

Controller:

$scope.editCustomer = function (index, customer, event) {
    // enter
    if (event.keyCode === 13) {
        $http.put('customers/' + customer.id, customer).success(function () {
            // update customer.name binding
            $scope.edit = false;
        })
    } 
    // esc, do nothing and revert
    else if (event.keyCode === 27) {
        $scope.edit = false;
    }
};

Is there a more efficient solution for handling this scenario?

javascript ajax angularjs

Answer 1

Answer №1

The issue you are facing is a common one that arises when using ng-repeat. By default, ng-repeat creates an isolated scope for each item it iterates over. This means that trying to set a variable like edit inside the child scope created by ng-repeat won't affect the parent controller's scope.

To solve this problem, you should use an object to store the variable so that changes are reflected properly across scopes. You can find more information on this behavior in the following link: https://github.com/angular/angular.js/wiki/Understanding-Scopes

To update your HTML code accordingly:

<ul>
    <li ng-repeat="customer in customers">
        <label>
            <input type="checkbox" ng-model="customer.selected"/>
        </label>
        <span ng-show="!customer.edit" ng-dblclick="customer.edit = true;">{{customer.name}}</span>
        <label ng-show="customer.edit">
            <input type="text" ng-model="customer.name" ng-keyup="editCustomer($event)"/>
        </label>
    </li>
</ul>

Also, adjust your controller code as follows:

$scope.editCustomer = function (event) {
    var customer = this.customer;    
    // enter key pressed
    if (event.keyCode === 13) {
        $http.put('customers/' + customer.id, customer).success(function () {
            customer.edit = false;
        })
    } 
    // escape key pressed, revert back
    else if (event.keyCode === 27) {
        customer.edit = false;
    }
};

I hope this explanation and solution prove helpful to you!

Best regards,
SA

Answer 2

The issue you are facing is a common one that arises when using ng-repeat. By default, ng-repeat creates an isolated scope for each item it iterates over. This means that trying to set a variable like edit inside the child scope created by ng-repeat won't affect the parent controller's scope.

To solve this problem, you should use an object to store the variable so that changes are reflected properly across scopes. You can find more information on this behavior in the following link: https://github.com/angular/angular.js/wiki/Understanding-Scopes

To update your HTML code accordingly:

<ul>
    <li ng-repeat="customer in customers">
        <label>
            <input type="checkbox" ng-model="customer.selected"/>
        </label>
        <span ng-show="!customer.edit" ng-dblclick="customer.edit = true;">{{customer.name}}</span>
        <label ng-show="customer.edit">
            <input type="text" ng-model="customer.name" ng-keyup="editCustomer($event)"/>
        </label>
    </li>
</ul>

Also, adjust your controller code as follows:

$scope.editCustomer = function (event) {
    var customer = this.customer;    
    // enter key pressed
    if (event.keyCode === 13) {
        $http.put('customers/' + customer.id, customer).success(function () {
            customer.edit = false;
        })
    } 
    // escape key pressed, revert back
    else if (event.keyCode === 27) {
        customer.edit = false;
    }
};

I hope this explanation and solution prove helpful to you!

Best regards,
SA

Answer 3

Answer №2

To display and hide your input, it is necessary to use both ng-hide and ng-show directives. It might seem illogical, but in my experience, this is the only way it functions correctly in my controller. There could possibly be a bug causing this behavior.

<label ng-show="edit" ng-hide="edit-hide">
  <input type="text" ng-model="customer.name" ng-keyup="editCustomer($index, customer, $event)"/>
</label>

// Display control
$scope.edit = true;
$socpe.edit_hide = false;

// Hide control
$scope.edit = false;
$scope.edit_hide = true;

Answer 4

To display and hide your input, it is necessary to use both ng-hide and ng-show directives. It might seem illogical, but in my experience, this is the only way it functions correctly in my controller. There could possibly be a bug causing this behavior.

<label ng-show="edit" ng-hide="edit-hide">
  <input type="text" ng-model="customer.name" ng-keyup="editCustomer($index, customer, $event)"/>
</label>

// Display control
$scope.edit = true;
$socpe.edit_hide = false;

// Hide control
$scope.edit = false;
$scope.edit_hide = true;

Answer 5

Answer №3

<ul>
    <li ng-repeat="client in clients">
        <label>
            <input type="checkbox" ng-model="client.selected"/>
        </label>
        <span ng-show="!editing" ng-dblclick="editing = true;">{{ client.name }}</span>
        <label ng-show="editing">
            <input type="text" ng-model="client.name" ng-keyup="editClient($index, client, $event)"/>
        </label>,
        <small ng-bind="client.created_at"></small>
        <button ng-click="removeClient($index, client)">-</button>
    </li>
</ul>

Controller:

$scope.editClient = function (index, client, event) {
    // enter
    if (event.keyCode === 13) {
        $http.put('clients/' + client.id, client).success(function () {
            // update client.name binding
            $scope.editing = false;
        })
    } 
    // esc, do nothing and revert
    else if (event.keyCode === 27) {
        // $scope.editing = false;
    }
};

Remember to set the default value $scope.editing = false at the beginning of your controller.

Answer 6

<ul>
    <li ng-repeat="client in clients">
        <label>
            <input type="checkbox" ng-model="client.selected"/>
        </label>
        <span ng-show="!editing" ng-dblclick="editing = true;">{{ client.name }}</span>
        <label ng-show="editing">
            <input type="text" ng-model="client.name" ng-keyup="editClient($index, client, $event)"/>
        </label>,
        <small ng-bind="client.created_at"></small>
        <button ng-click="removeClient($index, client)">-</button>
    </li>
</ul>

Controller:

$scope.editClient = function (index, client, event) {
    // enter
    if (event.keyCode === 13) {
        $http.put('clients/' + client.id, client).success(function () {
            // update client.name binding
            $scope.editing = false;
        })
    } 
    // esc, do nothing and revert
    else if (event.keyCode === 27) {
        // $scope.editing = false;
    }
};

Remember to set the default value $scope.editing = false at the beginning of your controller.

When an AJAX request is successful in Angular, utilize the ng-hide directive

Answer №1

Answer №2

Answer №3

Similar questions

Javascript if-else is malfunctioning

Convert HTML table data to JSON format and customize cell values

Ways to convert a JavaScript object's properties into JSON format

Perform a calculation using data from one schema and store the result in a different schema within MongoDB using Node.js

How to generate a dropdown menu using a deeply nested JSON array

Opting out of accents in the Vue filter and utilizing the table filter feature provided by Bootstrap-Vue

If a particular <td> element is present on the page, exhibit a unique <div>

Why isn't my lightbox able to read this specific property?

Update dynamically generated CSS automatically

Issues with managing ajax response handlers

Using JavaScript, you can employ the .split() and .replace() methods on a string value to accurately extract the specific

Tips on incorporating the Browserified npm package into an Angular controller

Prioritize moving the JavaScript onload handler to the end of the queue

What is the best way to apply index-based filtering in Angular JS?

"I'm trying to incorporate react-datepicker into my ReScript application, but I'm struggling to

Is it possible to utilize $.each() in combination with $.ajax() to query an API?

Steps for showing personalized validation error messages in Angular 7

Retrieve information from Angular service's HTTP response

How can I create a computed field in TypeORM by deriving its value from other fields within the same Entity?

Encountering a console error: Prop type validation failed for the `Rating` component with the message that the prop `value` is required but is currently `undefined`