Geek Answers Handbook

Using modal window inside ng-repeat

I have ng-repeat , and I'm trying to add a modal that passes the same scope variable to the modal window. I can get a modal window to open, but the value of the area from ng-repeat does not appear inside the modal. Hope my code explains better. This is what I have so far:

  <div ng-controller="CustomerController"> <div ng-repeat="customer in customers"> <button class="btn btn-default" ng-click="open()">{{ customer.name }}</button> <!--MODAL WINDOW--> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3>The Customer Name is: {{ customer.name }}</h3> </div> <div class="modal-body"> This is where the Customer Details Goes<br /> {{ customer.details }} </div> <div class="modal-footer"> </div> </script> </div> </div>

Controller:

  app.controller('CustomerController', function($scope, $timeout, $modal, $log, customerServices) { $scope.customers= customerServices.getCustomers(); // MODAL WINDOW $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', }); }; });

The above opens a modal window. However, client data, such as {{customer.name}} from ng-repeat, is not passed to the modal window. Is there something wrong with the controller?

I am trying to create this by looking at the Angular Bootrap UI example here: http://angular-ui.imtqy.com/bootstrap/

EDIT:

Here is a jsfiddle example: http://jsfiddle.net/Alien_time/8s9ss/3/

+6
source share
2 answers

I updated your fiddle and below code. Hope this helps.

Hello

 var app = angular.module('app', ['ui.bootstrap']); app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer) { $scope.customer = customer; }); app.controller('CustomerController', function($scope, $timeout, $modal, $log) { $scope.customers = [ { name: 'Ricky', details: 'Some Details for Ricky', }, { name: 'Dicky', details: 'Some Dicky Details', }, { name: 'Nicky', details: 'Some Nicky Details', } ]; // MODAL WINDOW $scope.open = function (_customer) { var modalInstance = $modal.open({ controller: "ModalInstanceCtrl", templateUrl: 'myModalContent.html', resolve: { customer: function() { return _customer; } } }); }; });
+12
source

This is how I configure my modals to handle the elements that I repeat and want to edit. I suggest setting it up to work with another controller, because then you can use DI to enter the allowed element into the area of ​​the child object.

 $scope.openModal = function(item) // This sets up some of the options I want the modal to open with var options = {} angular.extend(options, { templateUrl: '/views/userItems/form.html', controller: 'ItemEditController', resolve: { // I resolve a copy of the so it dont mess up the original if they cancel item: function() { return angular.copy(item); } } }); $modal.open(options).result.then(function(updatedItem) { // after the user saves the edits to the item it gets passed back in the then function if(updatedItem) { // this is a service i have to deal with talking to my db modelService.editItem(updatedItem).then(function(result) { // get the result back, error check then update the scope if(result.reason) { $scope.addAlert({type: 'error', title: 'Application Error', msg: result.reason}); } else { angular.extend(vital, result); $scope.addAlert({type: 'success', msg: 'Successfully updated Item!'}); } }); } }); };
+2
source

More articles:


All Articles