Question

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

Answer 1

在tagging元素上添加ui-select（指令）属性，该属性将显示所选的字符串选项。

<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

ui-选择不显示在动画div中

1 个答案: