javascript - 将 md-fab-toolbar 与 ng-repeat 结合使用

Question

我在我的项目中使用 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>

我今天似乎没什么想法了。有人能指出我正确的方向吗？

Answer 1

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

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

它的工作方式是每个 ng-repeat 项目都有自己的单独范围。并将维持其关闭和打开支柱值的范围循环。如果您希望在打开另一个选项卡时切换其他打开的选项卡，那么解决方案可能不是您正在寻找的，在这种情况下，解决方案可能需要在 Controller 级别精心设计，以将额外的 Prop 附加到 itemList，然后根据单独的操作修改每个选项卡。 p>