Question

我已经构建了一个addressBook holder，它应该允许用户：

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 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;
})

角度控制器

第一个控制器（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）

1 个答案: