Question

更新：这是jsfiddle：http://jsfiddle.net/robertyoung/jwTU2/9/

我正在使用AngularJS构建网页/应用。

我想要的功能是，当用户在时间卡表中添加一行时，他可以从选择选项列表中选择一个人的名字，然后自动在名称后面显示该人的相应标题。 / p>

同时，该人的名称和头衔需要与另一个数组绑定（timecard.name和timecard.title）。那可能吗？我已经尝试了以下代码并且没有运气就玩了。

<div ng-repeat="for timecard in timecards">
  <td> 
     <span class="nullable">
       <select ng-model="timecard.name" ng-options="contact.name for contact in contacts">
         <option value="">Name</option>
       </select>
     </span>
  </td>

  <td> 
    <!-- The title of that corresponding contact should shown here -->
  </td> 

  <td>
    <input ng-model="timecard.totalHours" type="number"/> 
  </td>
</div>

在我的控制器中：

$scope.contacts = [
   {name:"Jack", title:"Driver"},
   {name:"Mike", title:"Technician"},
   {name:"Lucy", title:"Engineer"}
];
$scope.timecards = [];

用户填写表单后，我希望数据看起来像：

$scope.timecards = [
   {name:"Jack", title:"Driver", totalHours:1},
   {name:"Mike", title:"Technician", totalHours:2},
   {name:"Lucy", title:"Engineer", totalHours:3}
];

Answer 1

我刚刚在select中更改了ngModel以您想要的方式工作，请尝试下面的代码。无论如何，我猜你真正想要的是动态添加时间卡对象。

<div ng-app="app" ng-controller="timecardCtrl">
<div ng-repeat="timecard in timecards">
    <table>
        <thead>
            <tr>
            <td style="width:30%">Name</td>
            <td style="width:30%">Title</td>
            <td>Total Hours</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td> 
                    <span class="nullable">
                        <select ng-model="timecard" ng-options="contact.name for contact in contacts">
                            <option value="">Name</option>
                        </select>
                    </span>
                </td>

                <td>
                    {{timecard.title}}<!-- The title of that corresponding contact should shown here -->
                </td>

                <td>
                    <input ng-model="timecard.totalHours" type="number" />
                </td>
                <td>
                    {{timecard}}
                </td>
            </tr>
        </tbody>
    </table>
 </div>
</div>

Answer 2

我对@ user3281440的代码做了一点改动

<div ng-app="app" ng-controller="timecardCtrl">
<div ng-repeat="timecard in timecards">
<table>
    <thead>
        <tr>
        <td style="width:30%">Name</td>
        <td style="width:30%">Title</td>
        <td>Total Hours</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td> 
                <span class="nullable">
                    <select ng-model="timecard" ng-options="contact.name for contact in contacts">
                        <option value="">{{timecard.name}}</option>
                    </select>
                </span>
            </td>

            <td>
                {{timecard.title}}<!-- The title of that corresponding contact should shown here -->
            </td>

            <td>
                <input ng-model="timecard.totalHours" type="number" />
            </td>
            <td>
                {{timecard}}
            </td>
        </tr>
    </tbody>
</table>

但它仍有一个缺点，即选项列表中有一个不必要的空选项。

如何从select指令与另一个数组绑定选项？

2 个答案: