如何展开/折叠Angular中的所有行

时间:2014-06-27 01:23:29

标签: angularjs toggle angularjs-ng-repeat ngtable

我已成功创建了一个功能,可以使用以下方式切换ng-table的各行以打开和关闭:

TestCase.prototype.toggle = function() {
  this.showMe = !this.showMe;
}

<tr ng-repeat="row in $data">

  <td align="left">
    <p ng-click="row.toggle();">{{row.description}}</p>

    <div ng-show="row.showMe">

有关更多代码,请参阅plunkr,请注意展开/折叠按钮位于“菜单”中。

但是,我无法找到一种方法来打开和关闭所有行。我希望能够以某种方式在行上运行for循环,然后在需要时调用toggle,但是我这样做的尝试失败了。见下文:

TestCase.prototype.expandAllAttemptOne = function() {
   for (var row in this) {
     if (!row.showMe)
     row.showMe = !row.showMe;
   }
}

function expandAllAttemptOneTwo(data) {
   for (var i in data) {
     if (!data[i].showMe) 
     data[i].showMe = !data[i].showMe;
   }
 }

关于如何正确切换所有行的想法?

1 个答案:

答案 0 :(得分:2)

ng-show指令与ng-clickng-init指令结合使用,我们可以这样做:

<div ng-controller="TableController">
  <button ng-click="setVisible(true)">Show All</button>
  <button ng-click="setVisible(false)">Hide All</button>
  <ul>
    <li ng-repeat="person in persons" 
        ng-click="person.visible = !person.visible" 
        ng-show="person.visible">
    {{person.name}} 
    </li>
  </ul>
</div>

我们的控制器可能如下所示:

myApp.controller('TableController', function ($scope) {

  $scope.persons = [
    { name: "John", visible : true}, 
    { name: "Jill", visible : true}, 
    { name: "Sue", visible : true}, 
    { name: "Jackson", visible : true}
    ];

  $scope.setVisible = function (visible) {
    angular.forEach($scope.persons, function (person) {
      person.visible = visible;
    });
  }
});

我们在这里做了几件事。首先,我们的控制器包含一组person个对象。这些对象中的每一个都具有名为visible的属性。我们将使用它来打开和关闭项目。其次,我们在名为setVisible的控制器中定义一个函数。这将一个布尔值作为参数,并将迭代整个persons数组并将每个person对象的visible属性设置为该值。

现在,在我们的html中,我们使用了三个角度指令; ng-clickng-repeatng-show。看起来你已经知道这些是如何工作的,所以我只是解释一下我在做什么。在我们的html中,我们使用ng-click为我们的“全部显示”和“全部隐藏”按钮设置点击事件处理程序。单击其中任何一个将导致setVisible被调用,其值为true或false。这将负责切换所有列表项全部打开或全部关闭。

接下来,在我们的ng-repeat指令中,我们提供了一个表达式,用于评估单击列表项的时间。在这种情况下,我们告诉angular将person.visible切换到当前相反的值。这实际上会隐藏列表项。最后,我们有ng-show指令,它与我们的visible属性一起使用,以确定是否呈现特定的列表项。

这是一个带有工作示例的plnkr:http://plnkr.co/edit/MlxyvfDo0jZVTkK0gman?p=preview

此代码是您可能执行的操作的一般示例,您应该能够对其进行扩展以满足您的特定需求。希望这有帮助!