populating input box with values when editing contact angular

Question

I am adding contacts to an address book. The user can then edit/update the contact. This works, you can add and edit addresses.

What am I trying to achieve

When a user clicks to edit an address I want the modal form to pop up and be populated with the values of the address/name the user.

I have tried many approaches but cannot get this to work. When editing an address/contact the input boxes are empty, the same as when you are adding an address. I am trying to have the input boxes populated with the details the user is editing.

Please see the code below.

The form looks like this:

<form>
    <input ng-model="ctrl.name" type="text" name="RecipientName" placeholder="Recipient name" required>
    <input ng-model="ctrl.address" type="text" name="AddressLineOne" placeholder="Address" required>
    <select ng-model="ctrl.country">
       <option ng-repeat="country in ctrl.countries" value="{{country.name}}">{{country.name}}</option>
    </select>
</form>

addAddress.html

<h3>Add address</h3>
<div ng-include="'app/views/partials/form.html'"></div>
<div class="actionButtons">
    <button class="cancel-btn" ng-click="ctrl.cancelAddress()">Cancel</button>
    <button class="save-btn" ng-click="ctrl.saveAddress(ctrl.name, ctrl.address, ctrl.country)">Save</button>
</div>

editAddress.html

<h3>Edit address</h3>
<div ng-include="'app/views/partials/form.html'"></div>
<div class="actionButtons">
    <button class="cancel-btn" ng-click="ctrl.cancelAddress()">Cancel</button>
    <button class="save-btn" ng-click="ctrl.updateAddress(ctrl.name, ctrl.address, ctrl.country, ctrl.getIndex)">Save</button>
</div>

Controller

app.controller('HomePageCtrl', function ($uibModal) {

//used to open modal for a new address
this.open = function () {
    touchnoteHomeCtrl.modalInstance = $uibModal.open({
        templateUrl: 'app/views/add-address.html',
        controller: 'ModalCtrl',
        controllerAs:'ctrl',
        resolve: {
            editIndex: function () {
                return undefined;
            }
       }
    });
};

//used to open modal to edit address
this.openEdit = function(index) {
    touchnoteHomeCtrl.modalInstance = $uibModal.open({
        templateUrl: 'app/views/edit-address.html',
        controller: 'ModalCtrl',
        controllerAs:'ctrl',
        resolve: {
            //this is used to access the index in the modalCtrl
            editIndex: function () {
                return index;
            }
       }
    });
  };

});

form/modal controller

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

this.addressBook = addressFactory.addressBook;
this.getIndex = editIndex;

if (editIndex !== undefined){
    this.name = addressFactory.addressBook[editIndex].name;
    this.address = addressFactory.addressBook[editIndex].address;
    this.country = addressFactory.addressBook[editIndex].country;
}

//save a new address to address book
this.saveAddress = function( name, address, country) {
    addressFactory.saveAddress( name, address, country);
    $uibModalInstance.close();
}

//edit an address already in address book
this.updateAddress = function(name, address, country, index) {
    addressFactory.updateAddress( name, address, country, index);
    $uibModalInstance.close();
}

  //closes modal and cancels action
  this.cancelAddress = function () {
    $uibModalInstance.dismiss('cancel');
  };

}]);

AddressFactory

'use strict';
app.factory('addressFactory', function(){

    var addressFactory = {};

//addressbook used to store addresses
addressFactory.addressBook = [];

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

//adds an address to the addressbook
addressFactory.saveAddress = function(name, address, country) {
    addressFactory.addressBook.push({
        name: name, 
        address: address, 
        country: country
    });
    localStorage.setItem('addressBook', JSON.stringify(addressFactory.addressBook));
};

//edits an address in the addressbook
addressFactory.updateAddress = function(name, address, country, index) {
    addressFactory.addressBook[index] = {
        name: name, 
        address: address,
        country: country
    };
    localStorage.setItem('addressBook', JSON.stringify(addressFactory.addressBook));
};

    return addressFactory;
});

Answer 1

Your form is referencing the control's scope, but I believe you need to reference ctrl.addressBook instead.

<form>
<input ng-model="ctrl.addressBook[ctrl.getIndex].name" type="text" name="RecipientName" placeholder="Recipient name" required>
<input ng-model="ctrl.addressBook[ctrl.getIndex].address" type="text" name="AddressLineOne" placeholder="Address" required>
<select ng-model="ctrl.addressBook[ctrl.getIndex].country">
   <option ng-repeat="country in ctrl.addressBook.countries" value="{{country.name}}">{{country.name}}</option>
</select>

Alternatively, you can copy the data to the local scope:

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

this.addressBook = addressFactory.addressBook;
this.getIndex = editIndex;
if (editIndex)
{
    this.name = addressFactory.addressBook[editIndex].name;
    this.address = addressFactory.addressBook[editIndex].address;
    this.country = addressFactory.addressBook[editIndex].country;
}

//save a new address to address book
this.saveAddress = function( name, address, country) {
    addressFactory.saveAddress( name, address, country);
    $uibModalInstance.close();
}

//edit an address already in address book
this.updateAddress = function(name, address, country, index) {
    addressFactory.updateAddress( name, address, country, index);
    $uibModalInstance.close();
}

  //closes modal and cancels action
  this.cancelAddress = function () {
    $uibModalInstance.dismiss('cancel');
  };

}]);