Question

我正在使用ng-repeat在div中的html页面上显示一些数据。在graph2emf(file="ggplot2_plot.emf", width=7, height=5)内部我有一个按钮，以便单独隐藏每个div的内容。这是我的html文件的简化版本。

div

我的.js文件中的代码如下

<body ng-app="task" ng-controller="repeat">
    <div ng-repeat='x in array' ng-show="{{ x.show }}">
      <p>{{ x.text }}
      </p>
  <button ng-click="toggle()">Hide</button>
    </div>
</body>

任何人都可以向我建议所需的更改，以便点击我var app = angular.module('task'); app.controller('repeat',function($scope){ $scope.array = [{ show: true, text:'Sample Text 1'}, { show: true, text:'Sample Text 2'}, { show: true, text:'Sample Text 3'}]; $scope.toggle = function(){ $scope.array.show = false ; }; })中的按钮时，该特定div会被隐藏。

我认为在通过ng-click

调用div时引用数组的特定元素时出错了

Answer 1

将您的元素作为参数放入切换功能。

<button ng-click="toggle(x)">Hide</button>

并在控制器中更改它：

$scope.toggle = function(x){
    x.show = !x.show;
};

Answer 2

如果不调用控制器中的函数，很容易实现这一点：

<body ng-app="task" ng-controller="repeat">
  <div ng-repeat='x in array' ng-show="showDetail">
    <p>{{ x.text }}</p>
      <button ng-click="showDetail != showDetail">Hide</button>
  </div>
</body>

如果单击“隐藏”，上述方法也会隐藏按钮。如果您想要隐藏您的内容并再次显示它，以下代码可以实现：

<body ng-app="task" ng-controller="repeat>
  <div ng-repeat='x in array'>
    <div class="content" ng-show="showContent">
      <p>{{ x.text }}</p>
    </div>
    <div class='btn btn-control'>
      <button ng-click="showContent != showContent"> Hide </button>
    </div>
  </div>
</body>

Answer 3

我找到了一种方法来满足我的需求，谢谢大家的建议。这是我实际使用的代码：

<body ng-app="task" ng-controller="repeat">
 <div ng-repeat='x in array' ng-hide="x.show">
  <p>{{ x.text }}
  </p>
  <button ng-click="toggle($index)">Hide</button>
 </div>
</body>

在我的js文件中，我这样使用它：

var app = angular.module('task');
app.controller('repeat',function($scope){
 $scope.array = [{
    show: true,
    text:'Sample Text 1'},
  { 
    show: true,
    text:'Sample Text 2'},
  { 
    show: true,
    text:'Sample Text 3'}];

 $scope.toggle = function(){
   $scope.array[index].show = false ;
  };
})

Answer 4

在你的html传递中

   <button ng-click="toggle(x.$index)">Hide</button>

在js中

  $scope.toggle = function(index){
  $scope.array[index].show = !$scope.array[index].show;
  };

使用ng-repeat中使用的ng-click更改布尔值

4 个答案: