Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: How do I select object field when using ui-select?

I want to convert this HTML select to angular-ui/ui-select syntax:

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

How can i make the ng-model be the persons email? The ng-options syntax ("p.email as p.name for p in people") does not work with the ui-select repeat.

I've managed to make the ui-select choose the right person object. But I'm just interested in the email field.

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

People object in controller:

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

Demo of above code: Plunker

like image 874
HoffZ Avatar asked Jan 29 '26 03:01

HoffZ


1 Answers

please see that demo :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>
like image 187
sylwester Avatar answered Jan 31 '26 18:01

sylwester



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!