Bearbeiten eines vorhandenen Kontakt in modal (Bootstrap-ui Winkel)

Question

ich einen adressBuch Halter aufgebaut haben, die es einem Benutzer erlauben sollte:

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. 

im Prinzip eine einfache CRUD app, mit allen durch die Verwendung localStorage gespeicherten Daten. Es sieht so aus, als ob ich etwas brauche like the solution here, aber ich bin mir nicht hundertprozentig sicher, wie ich das machen würde.

Ich habe sowohl das Erstellen als auch das Löschen einer Adresse implementiert, habe aber Schwierigkeiten beim Implementieren der Bearbeitung einer Adresse, die bereits existiert.

Mit dem Code, den ich unten habe, wenn ich auf den Kontakt bearbeiten-Button klicke, öffnet sich das Modal, aber wenn ich die Details in das Formular eingebe, erzeugt es eine neue Adresse, anstatt die zu bearbeiten, auf die ich geklickt habe.

Dies geschieht, da ich nicht zwischen den beiden unterscheiden. Jede Anleitung, wie man den Code ändert, damit ich eine Adresse bearbeiten kann, wäre brilliant. Ich habe die letzten paar Stunden damit verbracht, das herauszufinden, bin aber völlig festgefahren. Bitte beachten Sie den folgenden Code. (Entschuldigt für die Menge an Code, aber ich denke, dass es notwendig ist, diese zu lösen)

Hier ist die javascript

Angular Fabrik

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 Controller

erster 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(); 

}) 

zweiten 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> 

Answer 1

Sie können den Index des editierten Element an den Modal mit testCtrl.modalInstance.idx = index passieren:

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, die bearbeiten und Elemente speichern, basierend auf, wenn sie oder haben keinen Index.