我有一個使用 AngularJS 創建的選擇下拉串列。我們設定了顯示前 5 項的限制，其余 5 項應該對用戶可見。當他單擊名為“shore more (5)”的第 5 個專案時，不會失去焦點，這意味著不會關閉下拉串列，必須顯示剩余的 5 個專案，如果達到最大高度，滾動條應該自動出現。我試過這個但找不到解決方案。
下面是我創建一個選擇下拉串列的代碼
<div ng-if="items.groups.length>5"
class="bx--select-input__wrapper" style="width: 100%">
<select carbon-select class="dropDown-text-overflow bx--select-input"
ng-model="selectedGroup"
ng-change="selectNegotiatedGroup(selectedGroup)">
<option class="bx--select-option"
data-ng-repeat="groupName in items.groups|limitTo:5"
value="{{groupName.label}}" ng-selected="{{groupName.selected}}">{{groupName.label}}</option>
<option ng-selected="false" value="show_more" ng-style="hideVisibility">Show More({{items.groups.length-5}})</option>
</select>
</div>
uj5u.com熱心網友回復：
// create some vars for pagination control
var displayIndex = 0;
var displayCount = $scope.items.groups.length < 5 ? $scope.items.groups.length : 5;
// create another array to display partial results
$scope.itemsToDisplay = $scope.items.groups.slice(displayIndex, displayCount);
// create a method to move pagination forward when called
$scope.showMore = function() {
// calculate the index and max item count for the next page
displayIndex ;
var max = displayIndex * 5;
if (max > $scope.items.groups.slice.length - 1) max = $scope.items.groups.slice.length - 1;
// appends the array's calculated range to the array that is displayed in the view
$scope.itemsToDisplay = $scope.itemsToDisplay.concat($scope.items.groups.slice(displayIndex, max - displayIndex));
}
在您看來，您必須顯示 itemsToDisplay 陣列并洗掉過濾器：
<div ng-if="itemsToDisplay.length>5"
class="bx--select-input__wrapper" style="width: 100%">
<select carbon-select class="dropDown-text-overflow bx--select-input"
ng-model="selectedGroup"
ng-change="selectNegotiatedGroup(selectedGroup)">
<option class="bx--select-option"
data-ng-repeat="groupName in itemsToDisplay"
value="{{groupName.label}}" ng-selected="{{groupName.selected}}">{{groupName.label}}</option>
<option ng-selected="false" value="show_more" ng-style="hideVisibility" ng-click="showMore()">Show More({{items.groups.length-5}})</option>
</select>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/535527.html
標籤：角度引导程序 4angularjs 指令angularjs范围angularjs-ng-重复