CODEWITHSUNDEEP
angularjsangular-ui-bootstrapbootstrap-modalmeanjs
Rohit Vinay
Rohit Vinay

Reputation: 663

Angular ng-repeat modal dialog does not work

I am using MEANJS, where angularjs is my front-end. i have a list of my articles, i am bring bringup a modal to edit data but fails to do so and modal does not work. i am using angular UI bootstrap for modal. my fiddle.

HTML

<div ng-controller="MyCtrl">
  <div ng-repeat="order in orders | limitTo:5">
    <button class="btn btn-default" ng-click="open(order)">Edit {{ order.title }}</button>
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3>{{ order.title }}</h3>
      </div>
      <div class="modal-body">
        <p ng-repeat="orde in order.orderfood">
      {{orde.name}} {{orde.qty}} {{orde.price}}
    </p>
      </div>
    </script>
  </div>
</div>

JS

myApp.factory('Orders', ['$resource', function($resource) {
  return $resource('https://safe-depths-4702.herokuapp.com/api/orders/:orderId', {
    orderId: '@_id'
  }, {
    update: {
      method: 'PUT'
    }
  });
}]).controller('ModalInstanceCtrl', function($scope, $stateParams, $modalInstance, Orders) {
  $scope.order = Orders.get({
    orderId: $stateParams.orderId
  });

  $scope.ok = function(order) {

    $modalInstance.close($scope.order);
  };

}).controller('MyCtrl', ['$scope', '$uibModal', 'Orders', function($scope, $uibModal, Orders) {
  $scope.orders = Orders.query();
  $scope.name = 'Superhero';
  $scope.open = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        order: function() {
          return $scope.order;
        }
      }
    });
  };
}]);

my fiddle.

Upvotes: 0

Views: 983

Answers (1)

Bennett Adams
Bennett Adams

Reputation: 1818

There was an error coming from the ui-bootstrap script in your fiddle, and it may have had to do with the fact that you were injecting the correct and up-to-date $uibModal service but the out-of-date $modalInstance service.

I created a plunker with your code and updated the $modalInstance to $uibModalInstance, and the modals are working as they should.

As you have written it, you fetch an array of all the orders with your $resource.query method and set the array on $scope in your html. There is no need to query again in the modal; since you're already iterating through the $scope.orders in your ng-repeat, you can just pass in the order that you want to open in your ng-click function: ng-click="open(order)" and match the parameter passed into the function in your controller (which in your fiddle is size, not order). You can resolve the selected order's value and inject it into the modal's controller, rather than running a redundant query on that specific order from within the modal's controller. You were putting only the size as the ng-click function parameter, which you can add back in if you like... I pulled it out for simplicity's sake.

Upvotes: 1

Related Questions