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隐藏但它隐藏了ng-repeat中的所有div。

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

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

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

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

Answer 4

还有一种方法：

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

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

4 个答案: