angularjs с парадигмой мастер-деталей ng-grid, которая имеет множественный выбор с модальным

Извиняюсь за запутанный заголовок. Итак, у меня работает multi-select + ng-grid здесь.

Для тех, кто не уверен, что такое парадигма master/detail. Я выбираю строку из моей сетки и каким-то образом выставляю все ее свойства для полного просмотра строки из моей сетки (основной элемент находится внутри сетки, детали - это свойства объекта)

Я хочу, чтобы он делал что-то вроде this

Но я не могу понять, как получить этот тип подробного представления. Я предполагаю, что мне нужно иметь набор событий типа emit/broadcast/on. Итак, снова возникает вопрос, как мне сделать основной/подробный вид с модальным и множественным выбором в angularjs + ng-grid?


javascript angularjs modal-dialog ng-grid
person Woot4Moo    schedule 11.11.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я не совсем уверен, как вы хотите создать модальное окно, но есть много вариантов. Одним из них является модальный angular bootstrap.

Помимо этого, с точки зрения получения данных из ng-grid, вы можете использовать параметр сетки afterSelectionChange для делегирования функции, которая сработает после того, как выбор будет сделан.

Эта вилка вашего плункера демонстрирует использование afterSelectionChange.

$scope.gridOptions = { 
  data: 'myData',
  selectedItems: $scope.mySelections,
  multiSelect: true,
  afterSelectionChange: function() {

    $scope.details = $scope.mySelections;
  }
};

$scope.details = null;

Затем вы можете ng-repeat получить результаты:

<button ng-click="show = !show">Show/Hide Details</button>
<div class="selectedItems" ng-show="show">
  You have selected:<br/><br/>
  <div ng-repeat="detail in details">
    name: {{ detail.name }}<br/>
    age: {{ detail.age }}
  </div>
</div>

Надеюсь, это поможет. Дайте мне знать, если я что-то пропустил.

ИЗМЕНИТЬ:

Хорошо, я интегрировал угловой модальный бутстрап в этот плункер.

Также может помочь пример углового модального бутстрапа без ng-grid. Вы можете найти это здесь, в этом модальном плункере.

person Davin Tryon    schedule 11.11.2013
comment
поэтому я ожидал, что я выберу несколько строк, например, первые две. Тогда я смогу щелкнуть что-нибудь, что даст мне модальное окно, показывающее все, что я выбрал. - person Woot4Moo; 11.11.2013
comment
Звучит хорошо, я должен обновить свой плунжер, чтобы показать что-то подобное? В простом случае я бы использовал button с ng-click для отображения. А потом показать тот же div. Я обновлю его. - person Davin Tryon; 11.11.2013
comment
да гораздо ближе :) . Последнее, что мне нужно, это то, что это будет отображаться внутри модального окна после нажатия кнопки. Поэтому причина этого в том, что я хочу, чтобы пользователи знали, какое подмножество данных они используют. - person Woot4Moo; 11.11.2013
comment
@ Woot4Moo Хорошо, смотрите последнюю РЕДАКТИРОВКУ. Я интегрировал угловой бутстрап в плункер. Это довольно грубо, но должно дать вам представление о том, как связать это вместе. - person Davin Tryon; 11.11.2013