1

我已经成功创建了一个函数来切换我的各个行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 循环，然后在需要时调用切换，但是我这样做的尝试失败了。在下面看到它们：

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

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

4

1 回答 1

2

将ng-show指令与ng-clickandng-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 中，我们使用了三个 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=preview

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

于 2014-06-27T02:14:50.790 回答