MobileAngularUi ng-repeat Modal

Question

I tried 32400236/dynamically-generate-modals-with-mobileangularui but didn't work. I also used to write:

<div class="access-item" ng-repeat="item in items track by $index">
 <a ui-turn-on="$index">Activate unique modal</a>
 <div ui-content-for="modals">
  <div class="modal modal-overlay" ui-if='$index' ui-state='$index'>
   ...

OR

<div class="access-item" ng-repeat="item in items track by $index">
 <a ui-turn-on="item.id">Activate unique modal</a>
 <div ui-content-for="modals">
  <div class="modal modal-overlay" ui-if='item.id' ui-state='item.id'>
   ...

but only the last modal is rendered when the modal is up.

As I say, I tried the function executed via ng-click as 32400236/dynamically-generate-modals-with-mobileangularui says. But it is not executed, no modal is shown.

There is a correct way to do this ?

score 0 · Answer 1 · answered Mar 18 '16 at 04:23

Only one model outside the ng-repeat:

<div ui-content-for="modals">
        <div class="modal modal-overlay" ui-if='modal' ui-state='modal'>

And a ng-click function:

$scope.openModal = function (id) {
    var single_obj = $filter('filter')($scope.items, function (d) {return d.id === id;})[0];
    $scope.access = single_obj;
    SharedState.initialize($rootScope, 'modal'); 
    $rootScope.Ui.turnOn( 'modal' );
   };

Works like a charm!

MobileAngularUi ng-repeat Modal

1 Answers1