Hiding a single span in a ng-repeat list from an async function

Issue

I have a list of items displayed on my website and every item has a few text fields and buttons. One of an item’s buttons makes it so that the item is in “editMode” which makes the text field changeable and changes the edit button to a save button. When the user then presses the save button the changes are saved and the item exits edit mode. The following code is how the website currently works and it works as intended.

<table class="table table-striped app">
    <tbody>
        <tr ng-repeat="obj in list">
            <td>
                <span ng-show="!editMode" style="float: right">
                    <i data-btn-icon-edit="" style="font-size: 14px;" class="icon-edit" ng-click="editMode = true;"></i>
                </span>
                <span ng-show="editMode" style="float: right">
                    <button btn-save class="btn btn-sm btn-primary" ng-click="save(data);">@Resources.CommonButtonSave</button>
                    <button btn-cancel class="btn btn-sm btn-primary" ng-click="editMode = false; cleanInputs();">@Resources.CommonButtonCancel</button>
                </span>
            </td>
        </tr>
    </tbody>
</table>

I now want to change the website so that the edited data is verified before the item can be saved. The data is verified by an HTTP post that returns OK if there’s no error and what the error is otherwise. I tried to exit edit mode from the async function using $scope.editMode = false; but that didn’t work. I’m guessing that’s because it doesn’t have any way to determine which items editMode it should change to false?

<table class="table table-striped app">
    <tbody>
        <tr ng-repeat="obj in list">
            <td>
                <span ng-show="!editMode" style="float: right">
                    <i data-btn-icon-edit="" style="font-size: 14px;" class="icon-edit" ng-click="editMode = true;"></i>
                </span>
                <span ng-show="editMode" style="float: right">
                    <button btn-save class="btn btn-sm btn-primary" ng-click="save(data);">@Resources.CommonButtonSave</button>
                    <button btn-cancel class="btn btn-sm btn-primary" ng-click="editMode = false; cleanInputs();">@Resources.CommonButtonCancel</button>
                </span>
            </td>
        </tr>
    </tbody>
</table>

@section Scripts{
    <script type="text/javascript">
        var app = angular.module('app');
        app.controller('PlanDetailsController',
            function($scope,
                $http)
                {

                $scope.editMode = false;

                $scope.save = function (data) {
                    await $http({
                        method: "POST",
                        url: '@Url.Action("foo", "bar")',
                        data: {data : data}
                    })
                    .success(function(response) {
                        if (response === "ok") {
                            $scope.editMode = false;
                        }
                        else {
                            //editMode stays true
                            Console.log(response)
                        }
                    });
                }
        }
    </script>
}

How can I make it so that edit mode is set to false if the data is successfully verified?

Solution

you’ll need to put the editMode property on your object, something like:

<table class="table table-striped app">
    <tbody>
        <tr ng-repeat="obj in list">
            <td>
                <span ng-show="!obj.editMode" style="float: right">
                    <i data-btn-icon-edit="" style="font-size: 14px;" class="icon-edit" ng-click="obj.editMode = true;"></i>
                </span>
                <span ng-show="obj.editMode" style="float: right">
                    <button btn-save class="btn btn-sm btn-primary" ng-click="save(data, obj);">@Resources.CommonButtonSave</button>
                    <button btn-cancel class="btn btn-sm btn-primary" ng-click="obj.editMode = false; cleanInputs();">@Resources.CommonButtonCancel</button>
                </span>
            </td>
        </tr>
    </tbody>
</table>

and modify your save function to accept the current object so the editMode property can be manipulated, like:

            $scope.save = function (data, obj) {
                await $http({
                    method: "POST",
                    url: '@Url.Action("foo", "bar")',
                    data: {data : data}
                })
                .success(function(response) {
                    if (response === "ok") {
                        obj.editMode = false;
                    }
                    else {
                        //editMode stays true
                        Console.log(response)
                    }
                });
            }

Currently, you’re correct, the controller doesn’t know which scope’s editMode to set, by making it a property of the object, it’s explicit on the object scope rather than on the ng-repeat item scope which isn’t accessible outside of template.

Answered By – bryan60

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0