我如何在Angular-UI模式中使用一個Div-ng的ng-repeat

我在Angular模態中有一個表單。我正在爲客戶員工添加一位新客戶。默認顯示是1名員工，所以我添加了一個按鈕，可以選擇添加另一個員工。我認爲添加一個ng-repeat可以做到這一點，但它不起作用。它不會加載該事業部的NG-重複在不在。 plunker 我如何在Angular-UI模式中使用一個Div-ng的ng-repeat

<div class="col-xs-12" style="width:initial" ng-repeat="employee in addMoreEmployees"> 
    <div class="inline-fields" style=""> 
     <label style="">First Name:</label> 
     <input style="width:150px" ng-model="selectedCustomerEmployee.CustomerEmployeeFirstName" type="text"> 
     <label style="margin-left:55px">Phone:</label> 
     <input class="spacing-inputs" style="width:150px" ng-model="selectedCustomerEmployee.CustomerEmployeePhoneNumber" type="text"> 
    </div> 
    <div class="inline-fields" style=""> 
     <label style="margin-left:3px">Last Name:</label> 
     <input style="width:150px" ng-model="selectedCustomerEmployee.CustomerEmployeeLastName" type="text"> 
     <label style="margin-left:71px">Cell:</label> 
     <input class="spacing-inputs" style="width:150px" ng-model="selectedCustomerEmployee.CustomerEmployeeCellNumber" type="text"> 
    </div> 
    <div class="inline-fields" style=""> 
     <label style="margin-left:37px">Email:</label> 
     <input style="width:150px" ng-model="selectedCustomerEmployee.CustomerEmployeeEmail" type="text"> 
     <label style="margin-left:72px">Fax:</label> 
     <input class="spacing-inputs" style="width:150px" ng-model="selectedCustomerEmployee.CustomerEmployeeFaxNumber" type="text"> 
    </div> 

    <div class="inline-fields" style=""> 
     <label style="margin-left:45px">Title:</label> 
     <select style="width:150px;height:27px" ng-model="selectedCustomerEmployee.CustomerEmployeeRole"> 
      <option value="" selected="selected">Select</option> 
      <option value="Admin">Admin</option> 
      <option value="PM">PM</option> 
      <option value="Accountant">Accountant</option> 
      <option value="Superintendent">Superintendent</option> 
     </select> 
    </div><br /> 
    <input type="button" ng-click="addMoreEmployees.push({id: addMoreEmployees.length + 1})" value=" Add Another Employee"> 
</div>

來源

2014-10-20 texas697

它的工作，但由於該表最初是空的，你看不到任何東西（包括加員工按鈕）。將此添加到example.js中的第30行，您將看到它顯示正確：

$scope.addMoreEmployees = [{}];

來源

2014-10-20 18:00:03 JoseM

很容易！謝謝。現在你有什麼想法，爲什麼在普朗克中，ng-repeat是完美的。但是在我的項目中，當我點擊添加另一個員工時，它會將其添加到模態的右側，那麼當我再次點擊它時，它會將它放在正確的位置？我附上一張照片。謝謝 – texas697 2014-10-20 18:09:58

你有奇怪的對齊問題的原因是因爲你沒有正確使用引導網格樣式。你需要在'row'中封裝你的'col-xs-12'。但是，您還需要刪除'container'類，這會導致您的佈局出現其他問題。這真是一個單獨的樣式問題。 – JoseM 2014-10-20 20:35:22

太棒了，謝謝 – texas697 2014-10-20 23:19:57

我如何在Angular-UI模式中使用一個Div-ng的ng-repeat

回答

相關問題