如何在Angular-UI模式中使用带有Div的ng-repeat

时间:2014-10-20 16:53:04

标签: angularjs

我在Angular Modal中有一个表单。我正在向客户员工添加新客户。默认显示为1名员工,因此我添加了一个按钮,可以选择添加其他员工。我假设添加一个ng-repeat可以解决这个问题,但它无法正常工作。它不会加载ng-repeat所在的Div。 plunker

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

pic

1 个答案:

答案 0 :(得分:1)

它确实有效,但由于列表最初为空,因此您看不到任何内容(包括添加员工按钮)。将其添加到example.js中的第30行,您将看到它显示在右侧:

$scope.addMoreEmployees = [{}];