我在我的项目中使用 angularJs Material,并且想在由 ng-repeat 生成的表格中使用 fab-toolbar。所需的行为是单独打开每个 fab 工具栏,并在单击它们时仅允许对该记录执行操作。发生的情况是所有 fab 工具栏都同时打开。
这是我的 Controller 代码:
(function () {
'use strict';
angular.module('formProject')
.controller('inboxCtrl', ['$scope', '$window', '$mdDialog',
function inboxCtrl($scope, $window, $mdDialog) {
$scope.itemList = [
{ assignComment: "someComment1" },
{ assignComment: "someComment2"}
];
$scope.flagMenuConfig = {
flagMenuOpen: false,
count: 0,
selectedDirection: 'left'
};
}
]);
})();
这是我的标记:
<div ng-repeat="item in itemList track by $index">
<!-- Example column -->
<div><strong>{{item.assignComment}}</strong></div>
<md-fab-toolbar md-open="flagMenuConfig.isOpen" count="flagMenuConfig.count" md-direction="{{flagMenuConfig.selectedDirection}}">
<md-fab-trigger class="align-with-text">
<md-button aria-label="Flag Menu" class="md-fab md-mini">
<md-tooltip>Flag this form</md-tooltip>
<md-icon md-svg-src="somesvg.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-toolbar>
<md-fab-actions class="md-toolbar-tools">
<md-button aria-label="Flag for self" class="md-icon-button">
<md-tooltip>Flag this form for review by yourself</md-tooltip>
<md-icon md-svg-src="anothersvg.svg"></md-icon>
</md-button>
</md-fab-actions>
</md-toolbar>
</md-fab-toolbar>
</div>
我今天似乎没什么想法了。有人能指出我正确的方向吗?
最佳答案
这是一种可能的解决方案,只需更改 md-open="this.isOpen"
,最初它将呈现为虚假值,该值将关闭它,一旦您单击它,它将切换 isOpen 值。
这是工作演示:https://codepen.io/rikin/pen/dwYRjP?editors=1010
它的工作方式是每个 ng-repeat 项目都有自己的单独范围。并将维持其关闭和打开支柱值的范围循环。如果您希望在打开另一个选项卡时切换其他打开的选项卡,那么解决方案可能不是您正在寻找的,在这种情况下,解决方案可能需要在 Controller 级别精心设计,以将额外的 Prop 附加到 itemList,然后根据单独的操作修改每个选项卡。 p>
关于javascript - 将 md-fab-toolbar 与 ng-repeat 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53734814/