angular-ui-select 如何为选项创建自定义对象

Question

我这里有一个多 selection 演示。

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

目前我可以select which person 对象，但无法创建 person 对象。

有没有好的方法 UI 接受用户对对象的输入？我不想手动创建 3 个输入字段（name、email 和 age）和确定按钮来插入它，因为它很乏味并且与 [=17= 一起看起来不太好]

  <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>

Answer 1

我认为，如果您只想处理一种类型的数据，例如姓名或电子邮件地址，您可以完成此操作，但在此处接受 3 种不同类型的数据供用户输入只会让用户感到沮丧。您很可能希望至少对电子邮件字段以及年龄和姓名进行验证。

我的建议是在 select 字段下方或旁边添加一个 link，表示添加另一个用户，触发模态显示或在 [=17] 下方取消隐藏小表单=]ion 添加其他用户，这将填充您正在存储的数组。

关于此的其他一些问题是用户创建的 select离子保存回某处的数据库或只是那些 selected？对我来说，这感觉就像你试图在一个人身上做很多事情 select。

Answer 2

我认为最好的办法是提醒用户他正在寻找的内容尚不存在，他必须自己添加。

我认为小型模态 window 可以很好地完成这项工作。您可以在列表底部附加一个 "Not found? Add it yourself" 元素（您可以创建一个始终包含该元素的自定义过滤器），并且 "Add it yourself" 打开一个模态 window 允许用户输入值，验证它们，将它们添加到您的列表并确认它作为一个选择。

angular-ui-select 如何为选项创建自定义对象

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

angularjs

angular-ui