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

问题描述

我已经成功创建了一个函数来切换我的 ng-table 的各个行以使用以下方法打开和关闭:

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

和

<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) {如果(！row.showMe)row.showMe = !row.showMe;}}函数 expandAllAttemptOneTwo(data) {for (var i in data) {如果 (!data[i].showMe)数据[i].showMe = !data[i].showMe;}}

关于如何正确打开/关闭所有行的任何想法?

解决方案

使用 ng-show 指令与 ng-click 和 ng-init 指令，我们可以这样做:

<button ng-click="setVisible(true)">全部显示</button><button ng-click="setVisible(false)">隐藏全部</button><ul><li ng-repeat="人在人中"ng-click="person.visible = !person.visible"ng-show="person.visible">{{person.name}}

我们的控制器可能看起来像这样:

myApp.controller('TableController', function ($scope) {$scope.persons = [{名称:约翰"，可见:真实}，{名称:吉尔"，可见:真实}，{名称:苏"，可见:真实}，{名称:杰克逊"，可见:真实}];$scope.setVisible = 函数(可见){angular.forEach($scope.persons, function (person) {person.visible = 可见；});}});

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

现在，在我们的 html 中，我们使用了三个 angular 指令；ng-click、ng-repeat 和 ng-show.看起来你已经有点知道这些是如何工作的，所以我只会解释我正在用它们做什么.在我们的 html 中，我们使用 ng-click 为全部显示"和全部隐藏"按钮设置点击事件处理程序.单击其中任何一个都会导致 setVisible 被调用，值为 true 或 false.这将负责切换我们所有的列表项，要么全部打开，要么全部关闭.

接下来，在我们的 ng-repeat 指令中，我们为 angular 提供了一个表达式，用于在单击列表项时进行评估.在这种情况下，我们告诉 angular 将 person.visible 切换到与当前相反的值.这将有效地隐藏列表项.最后，我们有我们的 ng-show 指令，它只是与我们的 visible 属性结合使用来确定是否呈现特定的列表项.

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

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

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

and

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

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

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

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

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?

解决方案

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

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.

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.

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.

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

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!

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