在模式中编辑现有联系人 (bootstrap-ui angular)

Question

我已经建立了一个地址簿持有人，它应该允许用户：

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.

本质上是一个简单的CRUD应用程序，所有数据都使用localStorage存储。看起来我需要一些东西 like the solution here，但我不确定我将如何做到这一点。

我已经实现了地址的创建和删除，但是在实现对已经存在的地址的编辑时遇到了困难。

使用下面的代码，当我单击“编辑联系人”按钮时，它会打开模式，但是当我在表单中输入详细信息时，它会创建一个新地址，而不是编辑我单击的地址。

这是因为我没有区分两者。任何关于如何更改代码以允许我编辑地址的指导都会很棒。我花了最后几个小时试图弄清楚这一点，但完全陷入困境。请看下面的代码。（抱歉代码量大，但我觉得有必要解决这个问题）

这里是javascript

Angular工厂

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 控制器

第一个控制器(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();

})

第二个控制器(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

您可以使用 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 可以根据项目是否有索引来编辑和保存项目。

在模式中编辑现有联系人 (bootstrap-ui angular)

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

javascript

angularjs

angular-ui-bootstrap