current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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

share|improve this question
1  
Angular chosen is better to handle those.. and syntax is closely aligned as well.. –  PSL Oct 1 at 17:16

1 Answer 1

up vote 1 down vote accepted

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>
share|improve this answer
    
Yes, this works if we change the model to ng-model="person.selected.email", but I want to bind the select directly to $scope.person.email –  HoffZ Oct 2 at 7:15
    
@HoffZ please see here plnkr.co/edit/InfxSo?p=preview –  sss Oct 2 at 8:15
    
Thanks, @sss. The the ng-model="$parent.person" in your Plunker did the trick. Update the code in your answer and I will accept it as the solution. –  HoffZ Oct 2 at 10:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.