AngularJS 드롭 다운 스크롤바와 너비

나는 anglejs 앱을 가지고 있습니다. 드롭 다운을 추가했지만 옵션 이름이 너무 길면 드롭 다운의 너비가 증가하고 아이템의 수가 증가함에 따라 높이도 계속 증가합니다. 나는 지금까지 달성 할 수있는 것을 보여주기 위해 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와 같은 가짜 드롭 다운을 만들어야합니다. (단지이 lib를 사용한 적이없는 google 만 사용) – jacob

.option {max-width : 100px;}을 (를) 추가하려고 시도했습니다. 그러나 그것은 드롭 다운에 아무런 영향을주지 않았습니다. – Shreya

죄송합니다.'option'에'no'가 없습니다 (클래스가 아니기 때문에 요소입니다). – jacob

불행히도 이것은 브라우저가하는 일이며 변경할 수 없습니다. 제가 알고있는 유일한 해결책은 실제 텍스트를 자르는 것입니다.

당신은 (이것은 예입니다)과 같이이에 대한 필터를 만들 수

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' 
    }]; 
});

근무 예 : 나는 빠르게 ngRepeat와 함께이 던진

http://jsfiddle.net/o3a3jcb9/

출처

2014-10-18 18:47:32 Phill

감사합니다 필; 폭 문제를 해결합니다. 내 드롭 다운 중 일부가 실제로 큰 너비와 문자 길이를 계산하고 적용하는 것이 매우 좋은 옵션이 아닐 수 있으므로 더 깨끗한 접근 방법이 필요하다고 생각했지만. 하지만 지금은 여전히 스크롤바 문제를 해결하는 방법에 대해 생각할 수 있습니다. – Shreya

아니요. 몰라. 나는 내 자신의 드롭 다운을 썼다. 그래서 나는이 문제들 때문에 브라우저 전반에서 일관된 모양과 느낌을 가질 수 있었다. :(내 자신을 만들 때까지 위와 같은 솔루션을 임시로 사용했습니다. 미안 해요 : ( – Phill

지시문과 ngOption을 사용하면 가능합니다. – jacob

: http://jsfiddle.net/jshado1/nfkgp5nL/

html

위의와

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) + '…'; 
     } 
    }; 
});

각도 8,188,

, 그것은 선택에 max-width의 가치를 존중 : 옵션의 라벨 max-width: 10em = 10 자.

출처

2014-10-18 23:57:17 jacob

AngularJS 드롭 다운 스크롤바와 너비

답변

관련 문제