cancel is not toggling the ngHide in angularjs

Question

I have create unordered list where user can click and edit(update) item. I have some problem hiding/showing divs logic. I have showItem div and editItem div when user click on edit it show editItem div and hide showItem but the cancel button is not working right when user click it will hide editItem div but will not open it html

<ul>
    <li data-ng-repeat="value in model.rrnConditionsValues">
        <div id="showItem" data-ng-show="!isVisible(value)">
            <input class="" type="submit" value="Edit" data-ng-click="toggleVisibility(value)">
            <input class="" type="submit" value="Delete" data-ng-click="deleteValue(value)">
            <label>{{value.formControllerValueName}}</label>
        </div>
        <div id="editItem" data-ng-hide="!isVisible(value)">
            <input class="" type="submit" value="update" data-ng-click="updateValue(value)">
            <input class="" type="submit" value="Cancel" data-ng-click="toggleVisibility(value)">
            <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
        </div>
    </li>
</ul>

javascript

$scope.updateValue = function (value) {
    itemsManagementService.updateValue(value);
};

$scope.deleteValue = function (value) {

};

$scope.toggleVisibility = function (model) {
    $scope.selected = model;
};
$scope.isVisible = function (model) {
    return $scope.selected === model;
};
$scope.hide = function () {
    return $scope.isVisible = false;
};

Answer 1

Since is a toggle, all you had to do is check if the model you are sending is the same as already are inside the selected. if it's , just set it to null.

$scope.toggleVisibility = function (model) {     
    if($scope.selected === model){
        $scope.selected = null;}
    else{
        $scope.selected = model;
    }
};

Jsfiddle of example

Answer 2

You could add a scope variable editingMode to store if the current item is in editing mode and also you should store the value before entering the edit mode so you can restore the old value after cancel click.

Please have a look at the demo below or in this jsfiddle.

angular.module('demoApp', [])
    .controller('mainController', function ($scope) {
    $scope.editingMode = [];
    $scope.backup = [];

    $scope.model = {
        rrnConditionsValues: [{
            formControllerValueName: "a"
        }, {
            formControllerValueName: "b"
        }, {
            formControllerValueName: "c"
        }, {
            formControllerValueName: "d"
        }]
    };
        
    $scope.updateValue = function (value, index) {
        //itemsManagementService.updateValue(value); // just removed for the demo
        $scope.editingMode[index] = false;
    };

    $scope.cancel = function (index) {
        $scope.model.rrnConditionsValues[index].formControllerValueName
            = $scope.backup[index];
        $scope.editingMode[index] = false;
    };
        
    $scope.toggleEdit = function (index) {
        // save current model value so we can restore it on cancel
        $scope.backup[index] = $scope.model.rrnConditionsValues[index].formControllerValueName;
        console.log($scope.backup);
        $scope.editingMode[index] = !$scope.editingMode[index];
        //$scope.selected = model;
    };
        
    $scope.deleteValue = function(index) {
        $scope.model.rrnConditionsValues.splice(index,1);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues">
            <div id="showItem" data-ng-show="!editingMode[$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
</div>