angularjsui-select2angularjs-select2

Empty value when opening

I want to use select2 with Angular, and sometimes it gets "empty" value when opening the select. I do not know why this happens.

Check how it looks like:

enter image description here

But, sometimes it works perfectly:

enter image description here

I really do not know why it happens this way. Here is my 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 is how I instantiate it:

<strainer-select
        items="campaigns"
        selectedItem="campaignSelected"
        handler="onCampaignFilterChanged"
        placeholder="Filtre por campanha"
        fillable="campaign"
    ></strainer-select>

Does anyone have ever seen this happens?

Any help is very appreciate.

Thank you all.

Solution

  • It might be a bug of the directive itself. The problem seems to be with directive's input inside it. So a workaround is to add style to 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>