is there an editable combobox in AngularJS?

[yle...@gmail.com]

I'm new to AngularJS. Is there an editable combobox in AngularJS?
What I need is a dropdown selection that user can select, or user can type in their own text?
But ng-options doesn't have 'editable' feature in it though.
Thanks.

[korneliusz wilgocki]

try bootstrap angular with dropdown button and typeahead

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[yle...@gmail.com]

I found a fiddle for that:
http://jsfiddle.net/ruslans_uralovs/2brhd/1/

But I've put it on an Angular Modal dialog like this, and when I click on the drop down button, the selection list doesn't show. Maybe I should change the z-index?
app.directive( 'modalDialog', function($parse)
{
    return {
        restrict: 'E',
        scope : { show : '=' },
        replace:true,
        transclude:true,
        link: function(scope, element, attrs ){
            scope.dialogStyle = {};
            if ( attrs.width ) scope.dialogStyle.width = attrs.width;
            if ( attrs.height) scope.dialogStyle.height = attrs.height;
            scope.hideModal = function() { scope.show = false; };
        },
        template : "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
    };
});

Style:
.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #CCCCCC;
    opacity: 0.2;
}

.ng-modal-dialog {
    /* A centered div above the overlay with a box shadow. */
    z-index: 10000;
    position: absolute;
    width: 50%; /* Default */
    /* Center the dialog */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    background-color: #eee;
    box-shadow: 4px 4px 80px #000;
}

.ng-modal-dialog-content {
    padding: 10px;
    text-align: left;
    background-color: #fff;
    height: 100%;
    width: 100%;
}

.ng-modal-dialog-content header {
    padding: 10px;
    font-weight: bold;
}

.ng-modal-dialog-header {
    font-size: 150%;
}

.ng-modal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 120%;
    display: inline-block;
    font-weight: bold;
    font-family: 'arial', 'sans-serif';
}

html: (And the dropdown on the right side wouldn't go same line as the 'Group Name:' text)
<dl>
                <dt >Group Name:</dt>
                <!-- <dd><select ng-model="newNode.group" ng-options="gas g.name for gin allGroups"></select></dd> -->
                <dd>
                <div class="input-group">
                    <input type="text" class="form-control" 
                        style="padding: 1px 1px; border-radius: 0px; font-size: inherit; line-height: inherit"
                        ng-model="newNode.groupShort.name">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-repeat="gin allGroups" class="input-lg">
                                <a href="#" ng-click="changeDefaultGroupName(gs)">{{g.name}}</a></li>
                        </ul>
                    </div>
                </div>
                </dd>
<dl>