Question

我有一个应用程序，它在屏幕上显示数据表。

该表格包含Id列，Description列和Created By列

数据来自两个javascript数组：

var rowData = [{ id: 1, desc: 'A', createdBy: 1 },
               { id: 2, desc: 'B', createdBy: 6 }];

var users   = [{ id: 1, name: 'jeff' },
               { id: 2, name: 'jane' },
               [ id: 6, name: 'jake' }];

这是我正在使用的HTML。请注意，要将Created By显示为名称，请使用来自users数组的<select>

<table>
   <tr data-ng-repeat="row in rowData">
      <td>{{ row.id }}</td>
      <td>
         <select
            data-ng-disabled="true"
            data-ng-model="row.createdBy"
            data-ng-options="item.id as item.name for item in users">
         </select></td>
   </tr>
</table>

使用<select>似乎可以工作，但实现查找似乎是一种非常混乱的方式，我看到一个禁用的选择下拉列表，我真的只想将名称视为文本。

如果不对源数组进行任何更改，我可以通过这种方式将其查找到代码或某种指令中。请注意，CreatedBy数据是只读的。

Answer 1

您可以循环浏览users列表，然后按name找到createdBy：

JSFiddle：http://jsfiddle.net/CdqTN/

创建一个接受createdBy的函数。然后在for循环中匹配它：

$scope.getUser = function (createdBy) {
    for (var i = 0; i < $scope.users.length; i++)
        if ($scope.users[i].id === createdBy)
            return $scope.users[i].name;
    return '';
}

然后在HTML中调用它：

<table>
   <tr data-ng-repeat="row in rowData">
      <td>{{ row.id }}</td>
      <td>
          {{ getUser(row.createdBy) }}
      </td>
   </tr>
</table>

有没有办法可以使用AngularJS </select>复制HTML <select>的“查找”功能

1 个答案: