AngularJS下拉滾動條和寬度

我有angularjs應用程序。我添加了下拉菜單，但如果選項名稱太長，則下拉寬度會增加，隨着項目數量增加，其高度也會不斷增加。我創建了jsfiddle來展示我至今能夠實現的目標。 http://jsfiddle.net/ibha/jd9jk755/4/AngularJS下拉滾動條和寬度

<div ng-controller="MyCtrl">  
    <select class="scrollwidth"> 
    <option ng-class="scrollwidth" ng-repeat="p in optionList" value="{{p.name}}"> 
     {{p.name}} 
    </option> 
</select> 
</div> 

function MyCtrl($scope) { 
    $scope.optionList = [{name : 'vlist3'},{name : 'vlist1'},{name : 'vlist2'},{name : 'vlistLongNameeeeeeeeeeeeeeeeeeeeeeeeeee'}];       

}

請讓我知道我可以使寬度和下拉恆定的高度，並添加滾動條。

來源

2014-10-18 Shreya

你可以通過'.option {max-width：100px;}'來剪裁選項的寬度，但我不認爲這是你想要的效果，我認爲這對於本機選擇是不可能的。你需要創建一個虛假的下拉菜單，像https://github.com/jseppi/angular-dropdowns（剛剛通過google發現 - 以前從未使用過這個庫） – jacob 2014-10-18 18:15:17

嘗試添加.option {max-width：100px;}但是這對下拉 – Shreya 2014-10-18 18:26:02

沒有任何影響，對'option'沒有'.'（它不是一個類，它是一個元素）。 – jacob 2014-10-18 21:15:22

不幸的是，這是瀏覽器正在做什麼，你不能改變它，我知道的唯一解決方案是自己截斷實際文本。

你可以爲這個像這樣創建一個過濾器（這是一個例子）：

angular.module('myApp', []) 
    .filter('truncate', function() { 
    return function (input, characters) { 
     if (input.length > characters) { 
      return input.substr(0, characters) + '...'; 
     } 

     return input; 
    }; 
}).controller('MyCtrl', function MyCtrl($scope) { 
    $scope.optionList = [{ 
     name: 'vlist3' 
    }, { 
     name: 'vlist1' 
    }, { 
     name: 'vlist2' 
    }, { 
     name: 'vlistLongNameeeeeeeeeeeeeeeeeeeeeeeeeee' 
    }]; 
});

工作例如：

http://jsfiddle.net/o3a3jcb9/

來源

2014-10-18 18:47:32 Phill

謝謝菲爾;這確實解決了寬度問題;雖然我希望有一個更清晰的方法，因爲我的一些下拉菜單有很大的寬度和計算字符長度，應用可能不是一個很好的選擇。但現在我仍然可以忍受它，任何想法如何解決滾動條問題。 – Shreya 2014-10-18 19:09:45

沒有。不知道。我寫下了自己的下拉菜單，這樣我就可以在瀏覽器中擁有一致的外觀和感覺，因爲這些問題。 :(我暫時使用了類似上面的解決方案，直到我創建了自己的。對不起：（ – Phill 2014-10-18 19:17:04

可能用指令和ngOption – jacob 2014-10-18 21:33:53

我趕緊用ngRepeat一起扔了這一點：http://jsfiddle.net/jshado1/nfkgp5nL/

Html

<select 
    class="truncated-select"> 
    <option 
     ng-repeat="option in options" 
     value="{{option.value}}" 
     truncate-option="option.label">{{option.label}}</option> 
</select>

角

angular.module('MyApp', []) 
.controller('MyController', [ 
    '$scope', 
    function MyController($scope) { 
     $scope.options = [ 
      { 
       "label": "1label", 
       "value": "option1value" 
      }, 
      { 
       "label": "option2label", 
       "value": "option2value" 
      }, 
      { 
       "label": "option3label", 
       "value": "option3value" 
      } 
     ]; 
     $scope.myModel = $scope.options[0]; 
    } 
]) 
.directive('truncateOption', function truncateOption() { 
    return { 
     restrict: 'A', 
     scope: { 
      label: '=truncateOption' 
     }, 
     link: function postLink(scope, element) { 
      var selectElm = element.parent(), 
       maxWidth = selectElm.css('max-width').replace('px',''), 
       fontSize = selectElm.css('font-size').replace('px',''), 
       maxLength = Math.floor(maxWidth/fontSize); 
      if (scope.label.length > maxLength) 
       scope.label = scope.label.slice(0 , maxLength-1) + '…'; 
     } 
    }; 
});

利用上述，它將尊重max-width值上的選擇：在該選項的標籤max-width: 10em = 10個字符。

來源

2014-10-18 23:57:17 jacob

AngularJS下拉滾動條和寬度

回答

相關問題