AngularJS ng-repeat内ng-if异常：点击按钮隐藏所有div问题

嘿，我太懂你这个困扰了！你现在的问题根源很清晰——你用了一个全局的$scope.showDetails变量来控制所有循环项的显示状态，所以一旦你把它改成1，所有ng-repeat生成的div都会一起隐藏，这肯定不是你想要的效果。

要实现“只隐藏当前点击的那一项”，关键是给每个循环的suggestions对象单独绑定自己的显示状态，而不是共用一个全局变量。下面是具体的修改方案：

第一步：修改JS代码 #

把全局的showDetails变量删掉，让delete函数直接操作当前点击的suggestion对象：

// 移除全局的$scope.showDetails = 0;
$scope.delete = function(suggestion, event) {
    // 如果需要使用event对象，比如获取DOM元素，可以保留event参数
    if(event) {
        alert(event.target.id);
    }
    // 直接操作当前suggestion的showDetails属性，控制它自己的显示
    suggestion.showDetails = 1;
    
    // 这里放你的AJAX调用和其他删除逻辑
};

第二步：修改HTML代码 #

把ng-if的判断条件改成当前suggestion的showDetails，同时在ng-click里把当前循环项传进去：

<div ng-repeat="suggestion in suggestions">
    <div class="col-xs-12 alert alert-info" ng-if="!suggestion.showDetails || suggestion.showDetails === 0">
        <center>
            <a ng-click="delete(suggestion, $event)" id="{{suggestion.id}}" class="btn btn-danger">
                <font size="4">
                    <i class="fa fa-times-circle"></i>
                </font> Delete
            </a>
        </center>
    </div>
</div>

为什么这样改能解决问题？ #

每个通过ng-repeat循环出来的suggestion都是独立的对象，当你给它添加showDetails属性后，修改这个属性只会影响当前项的显示状态，不会牵连其他循环项。如果你的原始suggestions数组里没有showDetails属性也没关系，Angular会自动为每个对象添加这个属性，不会影响你原有数据的结构。

如果后续你想恢复显示某一项，只需要把对应suggestion的showDetails改回0就可以啦！

内容的提问来源于stack exchange，提问作者Roxx