CODEWITHSUNDEEP
angularjsangular-ui
OMGPOP
OMGPOP

Reputation: 942

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

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>

Upvotes: 2

Views: 964

Answers (2)

XelharK
XelharK

Reputation: 609

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.

Upvotes: 0

James
James

Reputation: 1514

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.

Upvotes: 1

Related Questions