cancel 不是在 angularjs 中切换 ngHide答案

【问题标题】：cancel is not toggling the ngHide in angularjscancel 不是在 angularjs 中切换 ngHide
【发布时间】：2015-10-28 17:06:59
【问题描述】：

我创建了无序列表，用户可以在其中单击和编辑（更新）项目。我在隐藏/显示 div 逻辑时遇到了一些问题。当用户单击编辑时我有 showItem div 和 editItem div

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

【问题讨论】：

return $scope.selected = 模型；
@ajmajmajma 不工作
是的，这只是一个快速编辑，关键是您需要返回 true/false 才能使 ng-show 或 ng-hide 工作。尝试使用类似 ng-hide="isVisible(value)" 的逻辑（或 ng-show 取决于你想要什么）。删除 not (!)

标签： javascript html css angularjs

【解决方案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>

【讨论】：

【解决方案2】：

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

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

Jsfiddle of example

【讨论】：