1

我在这里与Angular发生了一些奇怪的事情。下拉式中的角度数据没有设置第二次

我有一个编辑按钮的详细信息视图。当我按下编辑按钮时,我将对象传递给编辑视图。在编辑表单上有几个下拉框。我第一次点击编辑按钮时,一切都很好。所有的下拉列表都选择了正确的值。当我在编辑表单上按取消时,我会回到详细信息视图。当我什么都不做,并再次按细节视图上的编辑按钮,下拉菜单根本没有选定的值!但下拉菜单确实有项目。

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

详细查看和编辑观点都是指令:

在为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> 
+0

不确定它是否相关,但onCustomerSaved属性未在您的模板中设置。此外,我认为这将有助于如果您显示customerEdit的html。 – Yann

+0

在我的代码中,我确实已经声明了onCustomerSaved,为了使其更具可读性,我已将它剥掉了一点。我将添加客户编辑的html。 – Martijn

+0

您是否尝试不恢复原始? –

回答

0

我可以回答为什么这个问题发生。

的问题是:

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

angular.copy做一个深拷贝。在上述呼叫之后,例如scope.customer.Country一个全新的对象,它不再是scope.countries的元素。因此,select指令丢失了所选值的跟踪。

相关问题