javascript - 取消不会在 angularjs 中切换 ngHide

Question

我创建了无序列表，用户可以在其中单击和编辑(更新)元素。我在隐藏/显示 div 逻辑时遇到了一些问题。当用户单击编辑时我有 showItem div 和 editItem div 它显示 editItem div 并隐藏 showItem 但是当用户单击取消按钮时取消按钮不工作它将隐藏 editItem div 但不会打开它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

如果当前元素处于编辑模式，您可以添加一个范围变量 editingMode 来存储，并且您还应该在进入编辑模式之前存储该值，以便您可以在取消点击后恢复旧值。

请查看下面或此 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>