具有多个字段的 AngularJS ng-options

Posted 2023-03-05

【中文标题】具有多个字段的 AngularJS ng-options

【英文标题】：AngularJS ng-options with several fields

【发布时间】：2012-11-16 03:25:16

【问题描述】：

我有一组包含用户信息的对象。

"Id": "1",
"Firstname": "ABCDEF",
"Lastname": "GHIJK",
"Middlename": ""

在我的选择选项中，我想显示两个字段 - Firstname Lastname。我不知道该怎么做以及如何将其绑定到ng-model。

【参考方案1】：

这对我有用：

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select>

来源：https://groups.google.com/d/msg/angular/ljJd5x1Tgrk/bZuVWCA1hO4J

【参考方案2】：

你可以试试这个：

<select 
  name="users" 
  ng-model="selectedUser" 
  ng-options="user.Id as user.Firstname + ' ' + user.Lastname for user in users">
</select>

文档中的更多信息：https://docs.angularjs.org/api/ng/directive/select

【讨论】：

如果 selectedUser 是模型中的对象，我们是否也可以添加多个值，比如我希望 `selectedUser.Firstname 作为 user.firstname 和 selectedUser.Lastname 作为 user.lastname 我们可以在 ng-options 中这样做吗？

我建议创建一个过滤器。像这样使用它 ng-options="user.Id as (user | userFullName) for user in users"

【参考方案3】：

始终存在非ng-options 场景，您可以在其中绑定ng-repeat 项中的两个参数：

  <select name="user" ng-model="vm.asignedUser">
    <option value="">Select user</option> 
    <option value=" 'name':user.name, 'id': user.id " ng-repeat="user in vm.users">
       user.nombreLargo 
    </option>
  </select>

【参考方案4】：

只是一个额外的更新，

我必须在括号中显示姓氏，所以这是我修改答案并使其工作的方法。

<select 
   name="users" 
   ng-model="selectedUser" 
   ng-options="user.Id as user.Firstname + ' (' + user.Lastname + ') ' for user in users">
</select>

【参考方案5】：

考虑到你的数组对象的格式是这样的。

$scope.userInfo = [
                    "Id": "1", "Firstname": "ACDEF", "Lastname": "GHIJK", "Middlename": "",
                    "Id": "2", "Firstname": "BADEF", "Lastname": "HIGJK", "Middlename": "",
                    "Id": "3", "Firstname": "CDBEF", "Lastname": "IIHJK", "Middlename": "",
                ]

您可以像这样显示两个字段并将其绑定到模型，如下所示。

<select ng-model="userInfo" ng-options="s.Firstname +' '+ s.Lastname for s in userInfo" class="span2"> </select>