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，并且还应该在进入编辑模式之前存储该值，以便在取消单击后恢复旧值。

请查看下面的演示或此read here。

＆＃13;

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);
    };
});

＆＃13;

<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>

＆＃13;

Answer 2

由于是一个切换，您所要做的就是检查您发送的模型是否与所选模型中的模型相同。如果是的话，只需将其设置为null。

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

Jsfiddle of example

取消不是在angularjs中切换ngHide

2 个答案: