Editing an existing contact in modal (bootstrap-ui angular)

Question

I have built a addressBook holder, which should allow a user:

1. create an address, by entering details in modal pop up; 
2.delete an address and 
3.edit an address that already exists by entering details in modal pop up.

Essentially a simple CRUD app, with all data stored by using localStorage. It looks like I need something like the solution here, but I am not hundred percent sure how I would do this.

I have implemented both the creation and deleting of an address, but am having difficulties implementing the editing of an address that already exists.

With the code I have below when I click the edit contact button, it opens the modal, but when I enter the details into the form it creates a new address as opposed to editing the one I clicked on.

This is happening as I am not distinguishing between the two. Any guidance on how to change the code to allow me edit an address would be brilliant. I have spent the last few hours trying to figure this out but am completely stuck. Please see the code below. (Apologies for the amount of code, but I think it is necessary to solve this)

Here is the javascript

Angular factory

app.factory('addressFactory', function(){
    var addressFactory = {};
    addressFactory.addressBook = [];

    addressFactory.countries = [
        {name: "United Kingdom"},
        {name: "United States of America"}
    ];

    addressFactory.saveAddress = function(name, country){
        addressFactory.addressBook.push({
            name: name, 
            country: country
        });
        localStorage.setItem('addressBook', JSON.stringify(addressFactory.addressBook));
    };

    addressFactory.deleteAddress = function(index) {
        addressFactory.addressBook.splice(index, 1); 
        localStorage.setItem('addressBook', JSON.stringify(addressFactory.addressBook)); 
    }

    return addressFactory;
})

Angular controllers

first controller(testCtrl)

app.controller('testCtrl', function ($routeParams, $uibModal, addressFactory) {

var testCtrl = this;
this.addressBook = addressFactory.addressBook;

this.init = function() {
    addressFactory.init();
    this.addressBook = addressFactory.addressBook;
}

this.deleteAddress = function(index){
    addressFactory.deleteAddress(index);
};

this.open = function () {
    testCtrl.modalInstance = $uibModal.open({
      templateUrl: 'app/views/partials/form.html',
      controller: 'ModalCtrl',
      controllerAs:'ctrl',
    });
}

this.init();

})

second controller(ModalCtrl)

.controller('ModalCtrl', function ($uibModalInstance,addressFactory) {

    this.addressBook = addressFactory.addressBook;
    this.countries = addressFactory.countries;

    this.saveAddress = function( name, country) {
        addressFactory.saveAddress( name,country);
        $uibModalInstance.dismiss('cancel');
    }

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

})

index.html

  <!-- used to open a modal to create a new address -->
  <a ng-click="ctrl.open()">Enter new address</a>


   <div ng-repeat="contact in ctrl.addressBook track by $index"> 
        <p class="contactName">{{contact.name}}</p>
        <p class="contactCountry">{{contact.country}}</p>

        <!-- used open a modal to edit a new address -->
        <button ng-click="ctrl.open()">Edit Contact</button>
        <button ng-click="ctrl.deleteAddress($index)">Delete Contact</button>
   </div>

form.html

<form>
    <input ng-model="ctrl.name" type="text">
    <select ng-model="ctrl.country" ng-options="country.name for country in ctrl.countries">
        <option value="">--Choose a country--</option>
    </select>
        <button ng-click="ctrl.cancelAddress()">Cancel</button>
        <button ng-click="ctrl.saveAddress(ctrl.name, ctrl.country.name)">Save</button>
</form>

Well, to make your life easy, I guess you could just add the new entry and delete the old one. So now all you need to do is delete the old entry after adding the updated one — Adjit, Apr 14 '16 at 20:32
@Adjit I think i need to be able to edit, like a CRUD application — , Apr 14 '16 at 20:36
Can you pass `$index` to `ctrl.saveAddress(ctrl.name, ctrl.country.name, $index)` and then if the `$index` is valid update the corresponding entry? — Adjit, Apr 14 '16 at 20:45
Just like you're passing another parameter to the function. so like `function( name, country, index)` then if a valid index has been passed you can just call `addressFractory.addressBook[index].name = name` to change the name property. Then just change the statement to alter other properties. — Adjit, Apr 14 '16 at 20:53
@Adjit the issue there is for a new contact, there will not be any `index` as it is not in `ng-repeat` — , Apr 14 '16 at 20:55
Ahh right, it's a modal. Wasn't sure if the form existed inside the repeat. Well, in that case take a look here: http://stackoverflow.com/questions/18576454/pass-parameter-to-modal — Adjit, Apr 14 '16 at 21:12
@Adjit Those answers don't really appear to help. Would you be able to provide an answer here as to how to implement this? — , Apr 14 '16 at 21:27
Honestly, not too sure what would do it. I know some Angular, but this is beyond me, so was offering some suggestions of things I would try. — Adjit, Apr 14 '16 at 21:50
@Adjit i know, i had used `resolve` and was able to access the data, but couldn't update the current item — , Apr 14 '16 at 21:56
How are you trying to update the item? you need to access the addressBook array and change the properties at a certain index. ie - `addressFactory.addressBook[index].name = name` — Adjit, Apr 14 '16 at 22:00

score 1 · Accepted Answer · answered Apr 15 '16 at 10:04

You can pass the index of the edited item to the modal with testCtrl.modalInstance.idx = index:

app.controller('testCtrl', function ($routeParams, $uibModal, addressFactory) {
  this.open = function (index) {
    testCtrl.modalInstance = $uibModal.open({
      templateUrl: 'form-modal.html',
      controller: 'ModalCtrl',
      controllerAs:'ctrl',
    });
    testCtrl.modalInstance.idx = index;
  }
  ...

Here is a codepen that can edit and save items, based on if they have or don't have an index.

Good example. I had a similar issue and was able to resolve it using the codepen. — neelmeg, Sep 18 '16 at 10:47

Editing an existing contact in modal (bootstrap-ui angular)

1 Answers1