Использование md-fab-toolbar с ng-repeat - PullRequest
Новая
       22

Использование md-fab-toolbar с ng-repeat

0 голосов
/ 12 декабря 2018

Я использую angularJs Material в своем проекте и хотел бы использовать fab-панель инструментов в таблице, которая генерируется с помощью ng-repeat.Желаемое поведение состоит в том, чтобы каждая отдельная панель инструментов открывалась индивидуально и позволяла выполнять действия только с этой записью при нажатии на нее.Происходит то, что все потрясающие панели инструментов открываются одновременно.

Вот мой код контроллера: 

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

Кажется, у меня нет идей на сегодня.Кто-нибудь может указать мне правильное направление здесь?

1 Ответ

0 голосов
/ 12 декабря 2018

Вот одно из возможных решений, просто измените md-open="this.isOpen", изначально оно будет отображаться в ложное значение, которое закроет его, и как только вы щелкнете по нему, оно переключит значение isOpen.

Вот рабочая демонстрация: https://codepen.io/rikin/pen/dwYRjP?editors=1010

Как это работает, каждый элемент ng-repeat будет иметь свою собственную область видимости.И будет поддерживать их цикл цикла закрытия и открытия значений реквизита.Решение может быть не тем, что вы ищете, если вы хотите переключать другие открытые вкладки при открытии другой, и в этом случае решение, вероятно, нужно будет создать на уровне контроллера, чтобы присоединить дополнительные реквизиты к itemList, а затем изменять каждую при отдельном действии.

...