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

Question

我在我的项目中使用 angularJs Material，并且想在由 ng-repeat 生成的 table 中使用 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 一起使用

Using md-fab-toolbar with ng-repeat

javascript

user-interface

angularjs

angularjs-ng-repeat

angularjs-material