CODEWITHSUNDEEP
javascriptjqueryangularjs
colin_dev256
colin_dev256

Reputation: 815

Angularjs: How to pass specific data to modal

I'm struggling to display 'nested' [array] data in my modal. I am able to see all my data fetched from a url in angular, on my view page. However, when I ng-click on the same element to pop out a modal to see the same information on the modal, I can't see some of the information. In this case I cant the employees or developers.

url fetching code in angular

**controller used is 'HomeController'
**/comments is where my json data is located with 'employees' 
being a one-to-many relationship entity in my backend (which might be the issue in my head)

var vm = this;
vm.projects = [];
$http.get('/comments')
    .then(function(result) {
        console.log(result);
        vm.projects = result.data; 
     });

data as used in my modal template (not working code in modal)

    <div ng-repeat="data in controller.projects">
        <ul ng-repeat="employee in data.employees">
            {{employee.name}}
        </ul>
    </div>

controller comes from <div ng-controller="HomeController as controller">

I have also tried this;

    <div ng-repeat="employee in Project.Employees" class="selected-item">
        {{employee.name}}
    </div>

but doesn't work!

As seen below, the employees show up on the 'normal' page.

enter image description here

However, when I ng-click="editProject(data)" the above card to pop up the modal, everything else shown above (not shown below here) pops up except the employees. Could it be a routing issue?

enter image description here

Basically everything works perfect on the template view until I pop out the modal. This is the "modal popping" code;

$scope.editProject = function(data) {
    $scope.showSelected = true;
    $scope.SelectedProject = data;
    var fromDate = moment(data.start).format('DD/MM/YYYY LT');
    var endDate  = moment(data.end).format('DD/MM/YYYY LT');

    $scope.Project = { 
        ProjectID : data.projectID, 
        Client : data.client,
        Title : data.title,
        Description: data.description,
        Employees: data.employees,
        StartAt : fromDate,
        EndAt : endDate,
        IsFullDay : false
    }

     $scope.ShowModal()
},

//This function is for show modal dialog
$scope.ShowModal = function(){
    $scope.option = {
        templateUrl: 'modalContent.html',
        controller: 'modalController',
        backdrop: 'static',
        resolve: {
            Project : function () { 
                return $scope.Project;
            },
            SelectedProject : $scope.SelectedProject                  
        }
    };

Could there be a promise I'm missing in the ShowModal resolve?

Meanwhile in chrome devtools, the employees seemed to have been 'picked' up as shown below;

enter image description here

However when I open the object, interestingly it says array is empty;

enter image description here

I am new to angular and web development in general. Let me know if you need me to reveal my backend or any other code you think is missing. I'm just thinking it's an angular issue. Thanks for your help.

Upvotes: 3

Views: 2028

Answers (1)

Andriy
Andriy

Reputation: 15442

you need to pass projects as dependency injection to you modal instance controller:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl',   function ($uibModalInstance, projects) {
  var $ctrl = this;
  $ctrl.projects = projects;

  $ctrl.ok = function () {
    $uibModalInstance.close();
  };

  $ctrl.cancel = function () {
    $uibModalInstance.dismiss();
  };
});

and resolve it in your opening function:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($http, $uibModal, $log, $document) {
  var $ctrl = this;

  $http.get('data.json').then(function(result) {
    console.log(result);
    $ctrl.projects = result.data; 
  });

  $ctrl.open = function (size, parentSelector) {
    var parentElem = parentSelector ? 
      angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
    var modalInstance = $uibModal.open({
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: size,
      appendTo: parentElem,
      resolve: {
        projects: function () {
          return $ctrl.projects;
        }
      }
    });
  };
});

please note also that controller name is passed with controllerAs property and not within HTML template.

plunker: https://plnkr.co/edit/wLI0pa07UNhr9Ld8CSg3?p=preview

Upvotes: 2

Related Questions