AngularJS ng-if ng-show/hide 在 ng-repeat 中隐藏所有 div

Question

我见过与此相关的类似问题，但这是不同的。在大多数问题中，ng-hide/show 在 ng-click 事件中触发。

这里是代码。

$scope.showDetails = 0;

$scope.delete = function(event) {
              alert(event.target.id);
              $scope.showDetails = 1;
//There would be more code for delete function. Some Ajax calls will be here.
}

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

问题是当我单击按钮时它会隐藏所有 div。我希望隐藏一个 div，但它会将所有 div 隐藏在 ng-repeat 中。

我已经搜索了多个问题并尝试了解决方案，但问题仍然存在。

Answer 1

在这种情况下，您需要在 new_suggestions 数组的每个对象中都有一个名为 showDetails 的属性，并在此基础上启用 ng-if。

<div ng-repeat="suggestions1 in news_suggestions">
     <div class="col-xs-12 alert alert-info" ng-if="suggestions1.showDetails == '0'">

Answer 2

您的代码在逻辑上是错误的。您只保留一份 showDetails 变量的副本。您需要一些与每个对象相关的属性。

这样试试

$scope.delete = function(index) {
              $scope.news_suggestions[index].hideDetails = true;
}


<div ng-repeat="suggestions1 in news_suggestions">
     <div class="col-xs-12 alert alert-info" ng-hide="suggestions1.hideDetails">
      <center> <a ng-click="delete($index)" id={{suggestions1.id}} class = "btn btn-danger"> <font size = "4"><i class="fa fa-times-circle"></i></font> Delete  </a> </center></div></div>

Answer 3

还有一种方法：

// add an array
$scope.hiddenIds = [];

<div ng-repeat="suggestions1 in news_suggestions">
     <!-- check if hidden -->
     <div ng-hide=" hiddenIds.indexOf(suggestions1.id)>-1 " class="col-xs-12 alert alert-info">
      <center> 
        <!-- remove/add to hidden array on click -->
        <a ng-click=" hiddenIds.indexOf(suggestions1.id)>-1 ? hiddenIds.splice(hiddenIds.indexOf(suggestions1.id),1) : hiddenIds.push(suggestions1.id) " id={{suggestions1.id}} class = "btn btn-danger"> 

这里您不需要修改现有的元素集合。

提示：如果您隐藏显示/隐藏按钮，您将无法再次显示该元素。所以你可能想稍微改变一下你的 html 布局；）

编辑

版本 2： 您可以随时将其从您的 html 移动到范围。

// add an array
$scope.hiddenIds = [];

$scope.checkHide = function(suggestions1){
    return $scope.hiddenIds.indexOf(suggestions1.id)>-1;
};

$scope.clickHide = function(suggestions1){
    $scope.hiddenIds.indexOf(suggestions1.id)>-1 ? $scope.hiddenIds.splice($scope.hiddenIds.indexOf(suggestions1.id),1) : $scope.hiddenIds.push(suggestions1.id) ;
};



<div ng-repeat="suggestions1 in news_suggestions">
     <!-- check if hidden -->
     <div ng-hide="checkHide(suggestions1)" class="col-xs-12 alert alert-info">
      <center> 
        <!-- remove/add to hidden array on click -->
        <a ng-click="clickHide(suggestions1)" id={{suggestions1.id}} class = "btn btn-danger">

编辑 2

如果你不需要 news_suggestions 中的那个元素（你不打算再次显示它），你可以简单地删除它，这更容易:)

$scope.remove = function(i){
    $scope.news_suggestions.splice(i,1);
};

<div ng-repeat="suggestions1 in news_suggestions track by $index">
     <div class="col-xs-12 alert alert-info">
      <center> 
        <!-- remove by index on click  -->
        <a ng-click="remove($index)" id={{suggestions1.id}} class = "btn btn-danger">

JSBin

Answer 4

是的，你的逻辑有问题。试试这个：

$scope.delete = function(el){
     el.hideDetails = true;
}


<div ng-repeat="suggestions1 in news_suggestions">
 <div class="col-xs-12 alert alert-info" ng-hide="hideDetails">
  <center> <a ng-click="delete(this)" id={{suggestions1.id}} class = "btn btn-danger"> <font size = "4"><i class="fa fa-times-circle"></i></font> Delete  </a> </center></div></div>