Question

我想使用select2 with Angular，有时在打开select时会获得“空”值。我不知道为什么会这样。

检查它的样子：

但是，有时它完美无缺：

我真的不知道为什么会这样。这是我的指令代码：

<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>

这是我实例化它的方式：

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

有没有人见过这种情况？

任何帮助都非常感谢。

谢谢大家。

Answer 1

这可能是指令本身的错误。问题似乎在于其中的指令输入。因此，解决方法是添加样式以强制100％宽度。

<!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>

打开

1 个答案: