javascript - 编辑接触 Angular 时用值填充输入框

Question

我正在将联系人添加到地址簿。然后用户可以编辑/更新联系人。这有效，您可以添加和编辑地址。

我想达到什么目的

当用户点击编辑地址时，我希望模态表单弹出并填充地址/用户名的值。

我尝试了很多方法，但无法使它起作用。编辑地址/联系人时，输入框为空，与添加地址时相同。我正在尝试让输入框填充用户正在编辑的详细信息。

请看下面的代码。

表单如下所示:

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

});

表单/模态 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');
  };

}]);

地址工厂

'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

您的表单正在引用控件的范围，但我相信您需要改为引用 ctrl.addressBook。

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

或者，您可以将数据复制到本地范围:

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

}]);