1

Модальное окно из ng-repeat

Не могу понять, как по клику вывести все значения "td" из "tr" в модальное окно, т.е есть много строк таблицы с различными данными:


key1: данные1, key2: данные2 ... 
(1 строка)


key1: данные3, key2: данные4 ... 
(2 строка)


и т.д. И как по клику, например на первую строку, получить модальное окно с "данные 1" и "данные 2" и т.д. Они сгенерированы через ng-repeat и явно через DOM не получается обратиться, в этом проблема Попытки записать значение через directive template, не увенчались успехом, передать значение с помощью Jquery в dialog или ng-message так-же.


<div  class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="">
    <tr  ng-repeat="mySomeData in someDataStorage | orderBy:'id':sortReverse " ng-click="showAlert($event,someDataStorage[mySomeData])">
         <td>{{mySomeData.key1}}</td>
         <td>{{mySomeData.key2}}</td>
         <td>{{mySomeData.key3}}</td>
         <td>{{mySomeData.key4}}</td> </tr>
</div>

Контроллер делает get запросы в someDataStorage.json и по ним строит таблицу, а модальное окно выводится через "Angular Alert".

  angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia, $http) {
  $http.get('someDataStorage.json').success(function(data) {
                $scope.someDataStorage = data;
            });

  $scope.showAlert = function($event) {
    $mdDialog.show(
      $mdDialog.alert()
     .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('Модальное окно с информацией из таблицы')
        .textContent("Что-то надо написать")
        .ariaLabel('Alert Dialog Demo')
        .ok('Закрыть')
        .targetEvent($event)
    );
  };
});
9
  • если используется ангуляр, лучше использовать ангуляр, а не jquery плагины
    – Grundy
    2 авг 2016 в 12:12
  • как приведенный код между собой связан? пока это три куска которые никак не связаны
    – Grundy
    2 авг 2016 в 12:13
  • Подправил, надеюсь код стал понятнее 2 авг 2016 в 12:27
  • Стоит посмотреть справку по используемой библиотеке: material.angularjs.org/latest/api/service/$mdDialog
    – Grundy
    2 авг 2016 в 12:32
  • я запутался: в чем именно заключается проблема? что, откуда ты открываешь и где появляется неожиданное поведение?
    – Grundy
    2 авг 2016 в 13:45

2 ответа 2

1
  1. Нужно воспользоваться свойством templateUrl, и указать свой шаблон для диалога
  2. Передать в контроллер диалога нужные данные используя свойство locals

Адаптированный пример из справки

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
  $scope.someDataStorage = [{
    key1: 1,
    key2: 2,
    key3: 3
  }, {
    key1: 11,
    key2: 12,
    key3: 13
  }];
  $scope.showAlert = function(ev, data) {
    $mdDialog.show({
        controller: DialogController,
        locals: {
          data: data
        },
        templateUrl: 'detail.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: true
      })
      .then(function(answer) {
        $scope.status = 'You said the information was "' + answer + '".';
      }, function() {
        $scope.status = 'You cancelled the dialog.';
      });
  };

});

function DialogController($scope, $mdDialog, data) {
  $scope.data = data;
  $scope.hide = function() {
    $mdDialog.hide();
  };

  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/
.dialogdemoBasicUsage #popupContainer {
  position: relative;
}
.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px;
}
.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px;
}
.dialogdemoBasicUsage button {
  width: 200px;
}
.dialogdemoBasicUsage div#status {
  color: #c60008;
}
.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
  margin-bottom: 0;
}
/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">

  <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
    <table>
      <thead>
        <tr>
          <th>key1</th>
          <th>key2</th>
          <th>key3</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="mySomeData in someDataStorage" ng-click="showAlert($event,mySomeData)">
          <td>{{mySomeData.key1}}</td>
          <td>{{mySomeData.key2}}</td>
          <td>{{mySomeData.key3}}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script type="text/ng-template" id="detail.tmpl.html">
    <md-dialog aria-label="Detail" ng-cloak>
      <form>
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2>Detail</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
              <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
          </div>
        </md-toolbar>

        <md-dialog-content>
          <div class="md-dialog-content">
            <pre>{{data|json}}</pre>
          </div>
        </md-dialog-content>

      </form>
    </md-dialog>
  </script>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

0

Если правильно понял вопрос, то, как минимум, для передачи данных таблицы в функциюshowAlert нужно передать someDataStorage[someData] вторым аргументом, либо первым, в зависимости от нужды. В итоге <tr ng-repeat="mySomeData in someDataStorage | orderBy:'id':sortReverse " ng-click="showAlert($event, someDataStorage[mySomeData])">.

3
  • идея правильная, реализация ошибочная: mySomeData - это не индекс, это объект
    – Grundy
    2 авг 2016 в 14:39
  • т.е someDataStorage.mySomeData ? 2 авг 2016 в 15:09
  • @ДимаМаруткин, нет, просто mySomeData
    – Grundy
    2 авг 2016 в 19:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.