angular-ui-select how to create custom object for options

Question

I have a multi selection demo here.

http://plnkr.co/edit/CVaMvt4zBUBD2QEsfIdk?p=preview

Currently I am able to select which person object, but unable to create the person object.

Is there a good way with good UI to accept user input for the object? I dont want to manually create 3 input fields (name, email and age) and ok button to insert it, since it's tedious and does not look good together with the ui-select

  <h3>Array of objects</h3>
  <ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{multipleDemo.selectedPeople}}</p>

make separate template then use ng-include to add that template — Pankaj Parkar
– Pankaj Parkar, Commented Aug 1, 2015 at 9:53
can you create a plunker? Is it the same as creating a custom directive? — OMGPOP
– OMGPOP, Commented Aug 1, 2015 at 9:56
could you look at this plnkr.co/edit/zaZKnSNO1tGsU0CLCxOS?p=preview — Pankaj Parkar
– Pankaj Parkar, Commented Aug 1, 2015 at 11:31
@PankajParkar i dont see any difference. I can't create the object — OMGPOP
– OMGPOP, Commented Aug 1, 2015 at 12:44
@OMGPOP are you tied to using the ui-select or would another select mechanism work for you? — tuckerjt07
– tuckerjt07, Commented Aug 8, 2015 at 1:12

James · Accepted Answer · 2015-08-05 15:18:04Z

1

I think if you were just wanting to do one type of data like name or email address you could accomplish this but accepting 3 different types of data for user input here is going to just frustrate the user. You are most likely going to want to have validation on at least the email field and maybe the age and name as well.

My suggestion would be to have a link under or next to the select field that say add another user which triggers the display of a modal or unhides a small form below the selection to add additional users which will populate the array you are storing.

Some other questions for this are user created selections saved back to a database somewhere or just the ones selected? To me this feels like you are trying to do to much in one select.

answered Aug 5, 2015 at 15:18

James

1,51412 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

XelharK · Accepted Answer · 2015-08-10 11:14:40Z

0

I think your best bet would be to alert the user that whatever he's looking for doesn't exist yet, and he'll have to add it himself.

I think a small modal window would work well to do the job. You can append a "Not found? Add it yourself" element at the bottom of the list (you can create a custom filter that always includes that element), and the "Add it yourself" opens a modal window that allows the user to input the values, validate them, add them to your list and confirm it as a selection.

answered Aug 10, 2015 at 11:14

XelharK

6099 silver badges21 bronze badges

Collectives™ on Stack Overflow

angular-ui-select how to create custom object for options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related