如何使选项从选择指令绑定到另一个数组

How to make options from select directive bound with another array?

本文关键字：绑定 另一个 数组 指令 选择 何使 选项      更新时间：2023-09-26

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

我正在使用AngularJS构建一个网页/应用程序。

我想要的功能是，当用户向计时卡表添加一行时，他可以从select picklist中选择一个人的名字，然后这个人的相应标题会自动显示在名字后面。

同时，那个家伙的名字和标题需要绑定到另一个数组(timeccard。name和timeccard。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>

In my controller:

$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}
];

我只是在select中改变了ngModel，让它按照你想要的方式工作，在你的fiddle中试试下面的代码。无论如何，我猜你真正想要的是动态地添加计时卡对象。

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

我对@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>

但是它仍然有一个缺点，那就是在picklist中有一个不必要的空选项

相关文章：