AngularJS：使用 ui-select 时如何选择对象字段？答案

【问题标题】：AngularJS: How do I select object field when using ui-select?AngularJS：使用 ui-select 时如何选择对象字段？
【发布时间】：2014-11-26 14:12:04
【问题描述】：

我想将此 HTML 选择转换为 angular-ui/ui-select 语法：

<select ng-model="person.email" ng-options="p.email as p.name for p in people"></select>

如何使 ng-model 成为个人电子邮件？ ng-options 语法（“p.email as p.name for p in people”）不适用于 ui-select repeat。

我已经设法让 ui-select 选择正确的人对象。但我只对电子邮件字段感兴趣。

<ui-select ng-model="person.email" theme="bootstrap">
    <ui-select-match placeholder="Choose">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

控制器中的人物对象：

$scope.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 10 },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 }
];

以上代码演示：Plunker

【问题讨论】：

Angular chosen 更好地处理这些......并且语法也紧密对齐......

标签： javascript angularjs angular-ui

【解决方案1】：

请看演示：http://plnkr.co/edit/InfxSo?p=preview

<body ng-controller="DemoCtrl">
    <p>Selected: {{person.email}}</p>
    <ui-select ng-model="$parent.person" theme="bootstrap">
        <ui-select-match placeholder="Choose">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="person in people">
            <div ng-bind-html="person.name"></div>
        </ui-select-choices>
    </ui-select>
    <br>
    <br>
    <!-- This is what i want to do -->
    <!--<select ng-model="person.email" ng-options="p.email as p.name for p in people">

          </select>>-->
</body>

【讨论】：

是的，如果我们将模型更改为 ng-model="person.selected.email"，这将有效，但我想将选择直接绑定到 $scope.person.email
谢谢，@sss。 Plunker 中的 ng-model="$parent.person" 成功了。更新您答案中的代码，我将接受它作为解决方案。