javascript - 下拉列表中的 Angular 数据未第二次设置

Question

我的 Angular 发生了一些奇怪的事情。

我有一个带有编辑按钮的详细信息 View 。当我按下编辑按钮时，我将对象传递到编辑 View 。在编辑表单上有几个下拉框。我第一次单击编辑按钮时，一切都加载良好。所有下拉菜单都选择了正确的值。当我在编辑表单上按取消时，我会返回到详细信息 View 。当我什么都不做并再次按详细信息 View 上的“编辑”按钮时，下拉列表根本没有选定的值!然而，下拉菜单确实有项目。

这怎么可能？我没有对数据做任何事情!

详细信息 View 和编辑 View 都是指令:

在customerDetails模板中:

<div>
  Here all the details of the customer

  <button ng-click="ShowCustomerEditForm()">Edit</button>
</div>

<customer-edit
 visible="showCustomerForm"
 customer = "customer">
</customer-edit>

指令客户编辑:

app.directive("customerEdit", function (CustomerService, CountryService) {
    return {
        restrict: 'E',
        templateUrl: '/Customer/Add',
        scope: {
            customer: '=',
            visible: '=',
            onCustomerSaved: '&'
        },
        link: function (scope, element, attributes) {

            CustomerService.getAllAcademicDegrees().then(function (response) {
                scope.academicDegrees = response;
            });

            CustomerService.getAllGenders().then(function (response) {
                scope.genders = response;
            });

            CountryService.getAllCountries().then(function (response) {
                scope.countries = response;
            });

            scope.$watch('customer', function (newValue) {
                if (newValue && newValue.Id > 0) {
                    scope.customer.originalCustomer = {};
                    angular.copy(scope.customer, scope.customer.originalCustomer);
                }
            });

            scope.customerFormSubmit = function () {
                if (scope.customer.Id > 0) {
                    editCustomer();
                }
                else {
                    addCustomer();
                }
            }

            scope.hideCustomerForm = function (restoreOriginal) {
                if (restoreOriginal) {
                    angular.copy(scope.customer.originalCustomer, scope.customer);
                }

                scope.visible = false;
            }

            // Private functions
            function editCustomer() {
                var editCustomer = createCustomer(scope.customer);
                editCustomer.Id = scope.customer.Id;

                CustomerService.editCustomer(editCustomer).then(editCustomerSucceeded);

                scope.hideCustomerForm(false);
            }

            function editCustomerSucceeded(response) {
                var uneditedCustomer = _.findWhere(scope.customers, { Id: response.Id });
                angular.copy(response, uneditedCustomer);
            }

            function addCustomer() {
                var newCustomer = createCustomer(scope.customer);

                CustomerService.addCustomer(newCustomer).then(function (response) {
                    scope.onCustomerSaved({ customer: response });
                    scope.hideCustomerForm(false);
                });
            }
        }
    }
});

我现在正在尝试解决这个问题 6 个小时，但我只是不明白它，我变得非常绝望..我只是不知道如何解决这个问题以及是什么导致了这个问题。我真的希望有人能帮助我..

编辑:客户编辑html:

<div class="add-edit-container">
    <div class="titleBox">
        {{ customerFormData.title }}
        <span class="close" title="Annuleren en sluiten" ng-click="hideCustomerForm(true)">&times;</span>
    </div>
    <div class="border">
        <form id="frmAddCustomer" name="form" novalidate data-ng-submit="customerFormSubmit()">
            <div>
                <fieldset>
                    <legend>Identificatie</legend>
                    <label>Code:</label>
                    <input type="text" data-ng-model="customer.Code" />
                    <label>Geslacht:</label>
                    <label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
                        <input type="radio" name="gender"  data-ng-value="gender" data-ng-model="customer.Gender" />{{gender.Description}}
                    </label>
                    <div class="clear-float"/>     
                    <label>Titel:</label>
                    <select data-ng-model="customer.AcademicDegree" data-ng-options="degree.Description for degree in academicDegrees"></select>
                    <label>Initialen:</label>
                    <input type="text" required data-ng-model="customer.Initials" />
                    <label>Voornaam: </label>
                    <input type="text" required data-ng-model="customer.FirstName" />
                    <label>Tussenvoegsel:</label>
                    <input type="text" data-ng-model="customer.MiddleName" />
                    <label>Achternaam:</label>
                    <input type="text" required data-ng-model="customer.LastName" />
                    <label>Geboortedatum:</label>
                    <input type="text" datepicker="01-01-1950" required data-ng-model="customer.BirthDate" />
                    <label>BSN:</label>
                    <input type="text" required data-ng-model="customer.BSNNo" />
                    <label>Identificatienummer:</label>
                    <input type="text" required data-ng-model="customer.IdCardNo" />
                </fieldset>
                <fieldset>
                    <legend>Contact</legend>
                    <label>Straat:</label>
                    <input type="text" required data-ng-model="customer.Street" />
                    <label>Huisnummer + toevoeging:</label>
                    <input type="text" required data-ng-model="customer.HouseNumber" style="width: 50px"/>
                    <input type="text" data-ng-model="customer.HouseNumberAddition" style="width: 50px"/>
                    <label>Postcode:</label>
                    <input type="text" required data-ng-model="customer.ZipCode" />
                    <label>Woonplaats:</label>
                    <input type="text" required data-ng-model="customer.City" />
                    <label>Telefoonnummer overdag:</label>
                    <input type="text" required data-ng-model="customer.DayPhone" />
                    <label>Telefoon anders:</label>
                    <input type="text" data-ng-model="customer.PhoneOther" />
                    <label>E-mailadres:</label>
                    <input type="email" required data-ng-model="customer.EmailAddress" />
                    <label>Bedrijfsnaam:</label>
                    <input type="text" data-ng-model="customer.CompanyName" />
                    <label>Land:</label>
                    <select data-ng-model="customer.Country" data-ng-options="country.Description for country in countries"></select>
                </fieldset>
                <fieldset>
                    <legend>Afwijkend postadres</legend>
                    <label>Straat:</label>
                    <input type="text" data-ng-model="customer.OtherStreet" placeholder="leeg indien niet van toepassing" />
                    <label>Huisnummer + toevoeging:</label>
                    <input type="text" data-ng-model="customer.OtherHouseNumber" style="width: 50px"/>
                    <input type="text" data-ng-model="customer.OtherHouseNumberAddition" style="width: 50px"/>
                    <label>Postcode:</label>
                    <input type="text" data-ng-model="customer.OtherZipCode" placeholder="leeg indien niet van toepassing" />
                    <label>Woonplaats:</label>
                    <input type="text" data-ng-model="customer.OtherCity" placeholder="leeg indien niet van toepassing" />
                    <input type="hidden" data-ng-model="customer.OtherAddressId" />
                </fieldset>
            </div>
            <div class="button-box">
                <input type="submit" value="Opslaan" class="button" />
                <a href="javascript:void(0)" ng-click="hideCustomerForm(true)" class="button">Annuleren</a>
            </div>
        </form>
    </div>
</div>

Answer 1

我可以回答为什么会出现这个问题。

问题是:

angular.copy(scope.customer.originalCustomer, scope.customer);

angular.copy 进行深层复制。例如，在上述调用之后，scope.customer.Country 是一个全新的对象，它不再是 scope.countries 的元素。因此，select 指令丢失了所选值的跟踪。