Angular:ui-select。具有“刷新”功能的自定义标记
Angular: ui-select. Custom tagging with `refresh` function
我需要 multi-select 的输入能力。问题是数据在用户点击时动态地来自服务器,如果没有找到合适的数据,我需要创建一个新标签。
代码示例:Getting addresses
如果输入新信息,当前示例不显示标签内的信息并且不显示标题 tagging-label="(custom 'new' label)"
(例如,您可以输入类似“blablablabla”的内容,服务器应该 return 没有)
如何处理?
我可以将所有结果保存到数组并使用数组而不是服务器的解决方法对我不起作用...
当您使用多个时,您需要在 ui-select-match
中使用 $item
您需要使用自定义函数来创建新项目(如 "blablabla")。
您在 ui-select
的标记属性中执行此操作
您需要的代码是这样的:
<ui-select multiple tagging="tagTransform" ng-model="myCompetences.competences" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
<ui-select-match placeholder="Select a address...">{{$item.formatted_address}}</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0">
<div ng-if="address.isTag" ng-bind-html="'<small>(new)</small>'"></div>
<small>
{{address.formatted_address}}
</small>
</ui-select-choices>
</ui-select>
此处您对示例进行了修改:http://plnkr.co/edit/CQkuSMQub9S81hSRueO1
这里是一个带有有用示例的 plnkr:
http://plnkr.co/edit/m1SQXUxftBLQtitng1f0
如果您想将信息添加到您的服务器或类似的东西,我建议使用 on-select 事件。
我需要 multi-select 的输入能力。问题是数据在用户点击时动态地来自服务器,如果没有找到合适的数据,我需要创建一个新标签。 代码示例:Getting addresses
如果输入新信息,当前示例不显示标签内的信息并且不显示标题 tagging-label="(custom 'new' label)"
(例如,您可以输入类似“blablablabla”的内容,服务器应该 return 没有)
如何处理? 我可以将所有结果保存到数组并使用数组而不是服务器的解决方法对我不起作用...
当您使用多个时,您需要在 ui-select-match
中使用 $item您需要使用自定义函数来创建新项目(如 "blablabla")。 您在 ui-select
的标记属性中执行此操作您需要的代码是这样的:
<ui-select multiple tagging="tagTransform" ng-model="myCompetences.competences" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
<ui-select-match placeholder="Select a address...">{{$item.formatted_address}}</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0">
<div ng-if="address.isTag" ng-bind-html="'<small>(new)</small>'"></div>
<small>
{{address.formatted_address}}
</small>
</ui-select-choices>
</ui-select>
此处您对示例进行了修改:http://plnkr.co/edit/CQkuSMQub9S81hSRueO1
这里是一个带有有用示例的 plnkr: http://plnkr.co/edit/m1SQXUxftBLQtitng1f0
如果您想将信息添加到您的服务器或类似的东西,我建议使用 on-select 事件。