Angular-ui-select how to create custom object for parameters
I have a demo of several options.
http://plnkr.co/edit/CVaMvt4zBUBD2QEsfIdk?p=preview
Currently, I can choose which person object, but cannot create a person object.
Is there a good way with a good UI to accept user input for an object? I don't want to manually create 3 input fields ( name
, email
and age
) and an ok button to insert it as it is tedious and doesn't look good withui-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}} <{{$item.email}}></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>
source to share
I think if you just wanted to do one type of data like name or email, you could do that, but accepting three different types of data for user input here would just frustrate the user. You will most likely want to receive confirmation at least by email and perhaps by age and name.
My suggestion would be to have a link below or next to the select box that says to add another user that starts the modal display or hides a small form below the selection to add additional users who will populate the array you are storing.
Some other questions for this - are user-created options stored in the database somewhere, or just the ones that were selected? To me, it looks like you are trying to do a lot in one choice.
source to share
I think the best thing to do would be to warn the user that whatever he is looking for does not exist yet and he will have to add it himself.
I think a small modal would work well to get the job done. You can add a "Not Found? Add It Yourself" item at the bottom of the list (you can create a custom filter that always includes this item), and "Add It Yourself" opens a modal window that allows the user to enter values, confirm them, add them to your list and confirm them as a selection.
source to share