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，然后根据单个操作对其进行修改。

结合使用md-fab-toolbar和ng-repeat

1 个答案: