在angularjs中创建一个editabale下拉列表(create a editabale drop down in angularjs)

编程入门 行业动态 更新时间:2024-10-12 14:22:59
在angularjs中创建一个editabale下拉列表(create a editabale drop down in angularjs)

我如何创建一个可编辑的下拉菜单,用户可以在其中添加一个新选项。

你可以在下面找到我的html下拉代码:

<select class="fieldDropdown" ng-model="currentFileGroup" title="" ng-options="value.ls_ItemValue as value.ls_ItemText for (key, value) in formLIST.filesGroup" data-style=""></select>

我想当用户填写选项时,它会自动添加到数据库中。 使用JavaScript,AngularJS或jQuery没有问题。

How I can create an editable drop down, that user can add a new option inside that with filling that.

You can find my html drop down code in below:

<select class="fieldDropdown" ng-model="currentFileGroup" title="" ng-options="value.ls_ItemValue as value.ls_ItemText for (key, value) in formLIST.filesGroup" data-style=""></select>

I want when a user filled the option, it automatically added to the database. There is no problem to using JavaScript, AngularJS or jQuery.

最满意答案

我通常使用ui-select进行这种交互: https : //github.com/angular-ui/ui-select

在这种情况下,“标记”功能可能最接近您想要的功能: http : //plnkr.co/edit/m1SQXUxftBLQtitng1f0?p = preview

<ui-select tagging="tagTransform" ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person"> <ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match> <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> <div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div> <div ng-if="!person.isTag" ng-bind-html="person.name + person.isTag| 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: {{person.selected}}</p>

I usually use ui-select for this sort of interaction: https://github.com/angular-ui/ui-select

The 'tagging' feature probably gets closest to what you'd want in this case: http://plnkr.co/edit/m1SQXUxftBLQtitng1f0?p=preview

<ui-select tagging="tagTransform" ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person"> <ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match> <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> <div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div> <div ng-if="!person.isTag" ng-bind-html="person.name + person.isTag| 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: {{person.selected}}</p>

更多推荐

本文发布于:2023-08-05 16:58:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1437219.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:创建一个   列表   angularjs   editabale   drop

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!