AngularJS > Bootstrap UI > Editing Item in Modal

Question

I'm working on a project that makes sense to add and edit items within a modal window. The add portion is working fine. The edit portion is opening the modal but my ng-model is not reflecting and the input fields are blank within the modal window.

Here's a plunker to illustrate the issue: http://plnkr.co/edit/8mHOo0YE4qv0UcDvCCgS?p=preview

AngularJS Code:

// Code goes here
var userPopup = angular.module('userPopup', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
userPopup.controller('popupController', function($scope, $uibModal, $log) {
$scope.users = [{
    name: 'Steve',
    job: 'Accounting',
    age: '39',
    sal: '36000',
    addr: '123 Streetly Unit 2, Chicago, IL 60601'
 }];

$scope.editUser = function(user) {
    var dialogInst = $uibModal.open({
      templateUrl: 'edit.html',
      controller: 'editDialogInstCtrl',
      size: 'lg',
      resolve: {
        selectedUser: function() {
          return $scope.user;
        }
      }
    });

  };

  $scope.addUser = function() {
    var dialogInst = $uibModal.open({
      templateUrl: 'popup.html',
      controller: 'DialogInstCtrl',
      size: 'lg',
      resolve: {
        selectedUser: function() {
          return $scope.user;
        }
      }
    });

    dialogInst.result.then(function(newuser) {
      $scope.users.push(newuser);
      $scope.user = {
        name: '',
        job: '',
        age: '',
        sal: '',
        addr: ''
      };
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

userPopup.controller('DialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
  //Assign Selected User
  $scope.user = selectedUser;

  $scope.submitUser = function() {
    $uibModalInstance.close($scope.user);
  };

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

userPopup.controller('editDialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
  //Assign Selected User
  $scope.user = selectedUser;

  $scope.save = function() {
    $uibModalInstance.close($scope.user);
  };

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

HTML Code:

<a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a>

I know it's close and I'm overlooking something. Please advise.

thank you

Answer 1

You have two issues, that are just typos, really.

In your JS code:

//                  passing `user` here
//                          v
$scope.editUser = function(user) {
  var dialogInst = $uibModal.open({
    /* ... */
    resolve: {
      selectedUser: function() {
        return $scope.user;
      } //          ^
    }   // using $scope.user there
  });
};

You're passing an argument to the editUser function, but not actually using it; referring instead to $scope.user, which is undefined.
It should be: selectedUser: function() { return user; }

In your HTML template:

<!-- declaring `user` here -->
<tr ng-repeat="user in users">
    <td>{{user.name}}</td>
    <td>{{user.job}}</td>
    <td>{{user.age}}</td>
    <td>{{user.sal | currency}}</td>
    <td>{{user.addr}}</td>
                                       <!-- using `selectedUser` there -->
    <td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>
</tr>

You're iterating over users, using a user variable; then referring to a (non-existent) selectedUser when calling editUser.
It should be: <a class="btn btn-link" ng-click="editUser(user)">Edit</a>

---

Here's a link to a (working) fork of your plunk.

Answer 2

You need to change this code in your view. replace this code

<td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>

to

<td><a class="btn btn-link" ng-click="editUser(user)">Edit</a></td>

and in your controller when invoke the modal.. change

$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
  templateUrl: 'edit.html',
  controller: 'editDialogInstCtrl',
  size: 'lg',
  resolve: {
    selectedUser: function() {
      return $scope.user;
    }
  }
});
};

to

$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
  templateUrl: 'edit.html',
  controller: 'editDialogInstCtrl',
  size: 'lg',
  resolve: {
    selectedUser: function() {
      return user;
    }
  }
});
};