Javascript 编辑接触角时用值填充输入框

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

我想要达到什么目标

当用户单击编辑地址时，我希望模式窗体弹出，并用用户的地址/名称的值填充

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

请参阅下面的代码

表单如下所示：

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

窗体/模式控制器

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

});

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

---

您的表单正在引用控件的作用域，但我认为您需要引用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>

---

当你说它不起作用时，到底是什么问题？uibModal根本就没有出现吗？@TomMettam该模式正在显示，但输入框为空——与添加地址时相同。有意义吗？只是想知道当你在主页上调用

openEdit（index）

时，你是否传递了正确的

index

值？@DavidTao索引传递正确不幸的是，这不起作用，它们仍然是空的。你可以添加一个plunkr吗？它将帮助我们帮助您：）我知道，在尝试的过程中，但问题是如何让模态在上面显示：-（请记住，包括我的答案，我已经更新了我的答案，以建议另一种方法

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

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

}]);