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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With