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>
On Monday, December 15, 2014 10:17:45 AM UTC-5, korneliusz wilgocki wrote:
>
> try bootstrap angular with dropdown button and typeahead
>
> 2014-12-15 16:06 GMT+01:00 <[email protected] <javascript:>>:
>>
>> 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.
>>
>> --
>> 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 [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
