angularjs – 如何展开/折叠Angular中的所有行
|
我已经成功创建了一个函数来切换我的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;
}
}
有关如何正确切换所有行开/关的任何想法？
使用ng-show指令结合ng-click和ng-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",{ name: "Sue",{ name: "Jackson",visible : true}
];
$scope.setVisible = function (visible) {
angular.forEach($scope.persons,function (person) {
person.visible = visible;
});
}
});
我们在这里做了几件事.首先,我们的控制器包含一个人物对象数组.这些对象中的每一个都具有名为visible的属性.我们将使用它来打开和关闭项目.其次,我们在控制器中定义一个名为setVisible的函数.这将一个布尔值作为参数,并将迭代整个人员数组并将每个人对象的可见属性设置为该值. 现在,在我们的html中,我们使用了三个角度指令; ng-click,ng-repeat和ng-show.看起来你已经知道这些是如何工作的,所以我只是解释一下我在做什么.在我们的html中,我们使用ng-click为我们的“全部显示”和“全部隐藏”按钮设置我们的点击事件处理程序.单击其中任何一个都将导致使用true或false的值调用setVisible.这将负责切换所有列表项全部打开或全部关闭. 接下来,在我们的ng-repeat指令中,我们提供了一个angular的表达式来评估单击??列表项的时间.在这种情况下,我们告诉角度切换人.可见到它当前的相反值.这实际上会隐藏列表项.最后,我们有了ng-show指令,它只是与我们的visible属性一起使用,以确定是否呈现特定的列表项. 这是一个有一个工作示例的plnkr：http://plnkr.co/edit/MlxyvfDo0jZVTkK0gman?p=preview 此代码是您可能执行的操作的一般示例,您应该能够对其进行扩展以满足您的特定需求.希望这有帮助！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |