在模态中编辑现有联系人（bootstrap-ui angular）

Posted 2023-05-07

【中文标题】在模态中编辑现有联系人（bootstrap-ui angular）

【英文标题】：Editing an existing contact in modal (bootstrap-ui angular)

【发布时间】：2016-08-06 14:43:15

【问题描述】：

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

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

角度工厂

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>

【问题讨论】：

好吧，为了让您的生活更轻松，我想您可以添加新条目并删除旧条目。所以现在你需要做的就是在添加更新的条目后删除旧条目

@Adjit 我想我需要能够像 CRUD 应用程序一样进行编辑

你能把$index传递给ctrl.saveAddress(ctrl.name, ctrl.country.name, $index)，然后如果$index有效，更新相应的条目吗？

@Adjit 在工厂/控制器中会是什么样子？

就像您将另一个参数传递给函数一样。就像function( name, country, index) 一样，如果通过了有效索引，您可以调用addressFractory.addressBook[index].name = name 来更改名称属性。然后只需更改语句以更改其他属性。

【参考方案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 可以根据项目是否有索引来编辑和保存项目。

【讨论】：

很好的例子。我遇到了类似的问题，并且能够使用 codepen 解决它。