如何展开/折叠角中的所有行 [英] How to expand/collapse all rows in Angular

问题描述

我已经成功地创建一个函数来切换我的 NG-表的各行打开和关闭使用：

I have successfully created a function to toggle the individual rows of my ng-table to open and close using:

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 了解code，注意扩大/折叠按钮，在菜单。

See the plunkr for more code, note the expand/collapse buttons are in the "menu".

不过，我不能想出一个办法到现在切换所有行的开和关。我希望能够以某种方式运行一个for循环在行，然后调用如果需要进行切换，不过我在努力这样做都失败了。看到他们如下：

However, I can't figure out a way to now toggle ALL of the rows on and off. I want to be able to somehow run a for loop over the rows and then call toggle if needed, however my attempts at doing so have failed. See them below:

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;
   }
 }

如何正确开启/关闭所有行任何想法？

Any ideas on how to properly toggle all rows on/off?

推荐答案

与组合使用 NG-节目指令NG-点击和 NG-INIT 指令，我们可以做这样的事情：

Using the ng-show directive in combination with the ng-click and ng-init directives, we can do something like this:

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

然后，我们的控制器可能是这样的：

Our controller might then look like this:

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;
    });
  }
});

我们在这里做了两件事情。首先，我们的控制器包含人对象的数组。这些对象中的每一个都有一个名为属性可见。我们将用它来打开和关闭的项目。其次，我们定义我们的控制器功能名为调用setVisible 。这需要一个布尔值作为参数，并会遍历整个人数组，并设置每个人对象的可见属性设置为值。

We are doing a couple things here. First, our controller contains an array of person objects. Each one of these objects has a property named visible. We'll use this to toggle items on and off. Second, we define a function in our controller named setVisible. This takes a boolean value as an argument, and will iterate over the entire persons array and set each person object's visible property to that value.

现在，在我们的HTML，我们用三个角度指令; NG-点击， NG-重复和 NG-节目。好像你已经有点知道如何工作的，所以我就解释我跟他们做，而不是。在我们的HTML，我们使用 NG-点击来建立我们的单击事件处理程序，我们的全部显示和隐藏全部按钮。点击任一这些会引起调用setVisible 来与true或false值调用。这将需要切换所有的列表中的项目要么全部，或者全部关闭照顾。

Now, in our html, we are using three angular directives; ng-click, ng-repeat, and ng-show. It seems like you already kinda know how these work, so I'll just explain what I'm doing with them instead. In our html we use ng-click to set up our click event handler for our "Show All" and "Hide All" buttons. Clicking either of these will cause setVisible to be called with a value of either true or false. This will take care of toggling all of our list items either all on, or all off.

接下来，我们 NG-重复指令，我们提供了一个前pression的角度单击列表项时评估。在这种情况下，我们告诉角度来切换 person.visible 为相反的值，它是目前。这有效地将隐藏列表项。最后，我们有我们的 NG-节目指令，这简直是在配合使用我们的可见属性，以确定是否或不呈现特定的列表项。

Next, in our ng-repeat directive, we provide an expression for angular to evaluate when a list item is clicked. In this case, we tell angular to toggle person.visible to the opposite value that it is currently. This effectively will hide a list item. And finally, we have our ng-show directive, which is simply used in conjunction with our visible property to determine whether or not to render a particular list item.

下面是一个工作例子plnkr： http://plnkr.co/编辑/ MlxyvfDo0jZVTkK0g​​man？p = preVIEW

Here is a plnkr with a working example: http://plnkr.co/edit/MlxyvfDo0jZVTkK0gman?p=preview

这code是的东西，你可以做一个普通的例子，你应该能够在它扩展以满足您的特殊需要。希望这有助于！

This code is a general example of something you might do, you should be able to expand upon it to fit your particular need. Hope this help!

这篇关于如何展开/折叠角中的所有行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！