ui-select 未在动画 div 中显示答案

【问题标题】：ui-select not showing in animated divui-select 未在动画 div 中显示
【发布时间】：2017-02-25 04:00:08
【问题描述】：

In this punk 我在一个从顶部滑动的 div 中有一个 ui-select（ui-select 接受多个项目）。问题是它没有显示。任何想法如何解决这个问题？

Javascript

var app = angular.module("app", ['ngSanitize','ngAnimate']);

app.controller('ctl', function($scope) {
  $scope.tags = ['Red','Green','Blue','Maroon','Umbra','Turquoise'];
  $scope.multiple = {};
  $scope.multiple.tags = ['Blue','Red'];
});

HTML

Open <input type="checkbox" ng-click="opened=!opened">

<div class="panel" ng-show="opened">
    <ui-select multiple ng-model="multiple.tags" style="width:200px;height:30px">
        <ui-select-match>{{$item}}</ui-select-match>
        <ui-select-choices repeat="tag in tags | filter:$select.search">
          {{tag}}
        </ui-select-choices>
    </ui-select>
</div>

CSS

.panel{
position: fixed;
right: 20px;
top: -2px;
width:400px;
height:300px;
background-color:orange;
}
.panel.ng-hide {
  top: -300px;
}
.panel.ng-hide-add, .panel.ng-hide-remove {
  transition: 0s linear all;
}
.panel.ng-hide-add-active, .panel.ng-hide-remove-active {
transition: all ease-in-out 0.5s;
}
.panel.ng-show-add-active {
  display: block;
}

【问题讨论】：

标签： angularjs ui-select

【解决方案1】：

在您的ui-select 元素上添加tagging(directive) 属性，这将显示您选择的字符串选项。

<ui-select multiple ng-model="multiple.tags" tagging style="width:200px;height:30px">
  <ui-select-match>{{$item}}</ui-select-match>
  <ui-select-choices repeat="tag in tags | filter:$select.search">
    {{tag}}
  </ui-select-choices>
</ui-select>

Forked Plunkr

【讨论】：