i want use select2 angular, , gets "empty" value when opening select. not know why happens.
check how looks like:
but, works perfectly:
i not know why happens way. here directive code:
<div class='form-group' ng-show="items && items.length > 0"> <ui-select ng-model="selecteditem" on-select="onchange($item);" theme="bootstrap"> <ui-select-match placeholder="{{placeholder}}"> {{selecteditem[fillable]}} </ui-select-match> <ui-select-choices repeat="item in items | filter: $select.search"> <span ng-bind="item[fillable]"></span> </ui-select-choices> </ui-select> </div> this how instantiate it:
<strainer-select items="campaigns" selecteditem="campaignselected" handler="oncampaignfilterchanged" placeholder="filtre por campanha" fillable="campaign" ></strainer-select> does have ever seen happens?
any appreciate.
thank all.
it might bug of directive itself. problem seems directive's input inside it. workaround add style force 100% width.
<!doctype html> <html> <head> <script data-require="jquery@2.0.3" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.js"></script> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <link data-require="select2@3.4.5" data-semver="3.4.5" rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" /> <link data-require="select2@3.4.5" data-semver="3.4.5" rel="stylesheet" href="./select.min.css" /> <script data-require="angular.js@1.5.5" data-semver="1.2.3" src="https://code.angularjs.org/1.5.5/angular.js"></script> <script data-require="ngsanitize@*" data-semver="1.3.15" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script> <script data-require="ui-select2@0.0.4" data-semver="0.0.4" src="./select.min.js"></script> <style> .ui-select-container input{ width:100% !important; } </style> </head> <body> <h1>hello plunker!</h1> <div ng-app="offersapp"> <div ng-controller="mycontroller"> <strainer-select items="campaigns" selecteditem="campaignselected" handler="oncampaignfilterchanged" placeholder="filtre por campanha" fillable="campaign"></strainer-select> </div> </div> <script src="script.js"></script> <script src="strainerselect.js"></script> </body> </html> 