Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am using mongodb, express, angularjs and nodejs to develop a simple application. However i face a problem that when I edit a record using bootstrap modal, the data is not binding with the data in ng-repeat.

Below is my code

entryController.js

function entryController($scope, $modal, entryFactory) {


// Get All Entry
entryFactory.getEntries().success(function(data) {
  $scope.entries = data;
});


// View Entry Detail
$scope.editEntry = function(id){
  var id = id._id;

  var modalInstance = $modal.open({
    templateUrl: 'editEntryModal',
    controller: editEntryModalController,
    resolve: {
        entry: function(){
            return entryFactory.getEntry(id);
        }
    }
  });
};

};

var editEntryModalController = function($scope, $modalInstance, $window, data, entryFactory)  {
$scope.entry = {};


$scope.entry = data.data.entry;
$scope.entry.name = data.data.entry.name;


$scope.editEntry = function(){
    entryFactory.updateEntry(data.data.entry._id, $scope.entry).success(function(){

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

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

Below this is my html code (entry.html)

<div class="container-fluid">
  <div class="row">

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">


        <button type="button" class="btn btn-default btn-lg" ng-click="addEntry()"><span class="glyphicon glyphicon-plus"></span></button>


        <div class="col-sm- col-xs-12 col-lg-3">
        <form class="form-search">
              <div class="input-group">
                  <input type="text" class="form-control " placeholder="Search..." ng-model="query">
                  <span class="input-group-btn">
                      <button type="submit" class="btn btn-search">Search</button>
                  </span>
              </div>
          </form>
        </div>

        <br />
        <br />

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>List Entry</h4>
            </div>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Country</th>
                        <th>Comment</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="entry in entries | filter: query">
                        <td>{{$index+1}}</td>
                        <td>{{entry.name}}</td>
                        <td>{{entry.email}}</td>
                        <td>{{entry.country}}</td>
                        <td>{{entry.comment}}</td>
                        <td>
                            <button type="button" class="btn btn-default btn-lg" ng-click="viewEntry(entry)"><span class="glyphicon glyphicon-eye-open"></span></button>
                            <button type="button" class="btn btn-default btn-lg" ng-click="editEntry(entry)"><span class="glyphicon glyphicon-edit"></span></button>
                            <button type="button" class="btn btn-default btn-lg" ng-click="deleteEntry(entry)"><span class="glyphicon glyphicon-trash"></span></button>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

    </div>

  </div>
</div>


<!-- Edit Entry Modal -->
<script type="text/ng-template" id="editEntryModal" />
<div modal="entryEdit">
<div class="modal-header">
    <h3>Edit - {{ entry.name }}</h3>
</div>
<div class="modal-body">
  <form role="form" class="form-horizontal" ng-model="addForm">
  <div class="form-group">
    <label for="inputName" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputName" ng-model="entry.name" name="name" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="inputEmail">E-mail</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail" ng-model="entry.email" name="email" placeholder="E-mail">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="inputCountry">Country</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputCountry" ng-model="entry.country" name="country" placeholder="Country">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="inputComment">Comment</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputComment" ng-model="entry.comment" name="comment" placeholder="Your Comment">
    </div>
  </div>
  </form>
  </div>
  <div class="modal-footer">
    <button ng-click="editEntry()" class="btn btn-info"><i class="icon-plus icon-white"></i>Save</button>
    <button class="btn btn-warning cancel" ng-click="cancel()">Cancel</button>
  </div>
  </div>
</div>
</script>

Below is the print screen of the problem.

http://imageshack.com/a/img534/3024/h5cy.png

share|improve this question
    
I swear I link this at least once a day: jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html –  Matt Way Mar 14 at 5:54
    
Thank you for your link. I think I found some glue from it. Thank you very much –  user3418436 Mar 14 at 11:59

1 Answer 1

You are retrieving a different object when you do

return entryFactory.getEntry(id);

and bind to modal.

Whereas your list is binding to a collection which has different reference

entryFactory.getEntries().success(function(data) {
  $scope.entries = data;
})

The option here is to refetch the entities when update is done by calling getEntries after $modalInstance.close();

Second is to get the object updated and add it to the collection replacing the old one.

share|improve this answer
    
Thank you for your correction. Now I have done the first option as you suggested to refetch the whole entities after update is done. –  user3418436 Mar 14 at 12:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.