将 md-fab-toolbar 与 ng-repeat 一起使用

Question

我在我的项目中使用 angularJs Material，并希望在由 ng-repeat 生成的表中使用 fab-toolbar。所需的行为是让每个 fab 工具栏单独打开，并允许在单击时仅对该记录执行操作。正在发生的事情是所有的 fab 工具栏都同时打开了。

这是我的控制器代码：

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

我今天似乎没有想法。谁能在这里指出我正确的方向？

Answer 1

这是一种可能的解决方案，只需将 md-open="this.isOpen" 更改为最初它将呈现为虚假值，这将关闭它，一旦您单击它，它将切换 isOpen 值。

这是工作演示：https://codepen.io/rikin/pen/dwYRjP?editors=1010

它的工作方式是每个 ng-repeat 项目都有自己的单独范围。并将保持其关闭和打开道具值的范围循环。如果您希望在打开另一个选项卡时切换其他打开的选项卡，则解决方案可能不是您想要的，在这种情况下，可能需要在控制器级别制作解决方案，以将其他道具附加到 itemList，然后根据单独的操作修改每个选项卡。