AngularJS Bug? - Select Multiple - Dynamically set size dependent on number of options

Question

I want to dynamically control the size of a multi-select.

html

<select 
    class="form-control" 
    ng-model="formData.selected_tests" 
    ng-options="c.test for c in tests"
    multiple="true"
    ng-multiple="true"
    name="tests"
    id="tests"
    size="{{ tests.length }}"
    ng-size="{{ tests.length }}">
</select>

js

$http({ method: 'GET', url: '/api/v1/test' })
    .success(function(data, status, headers, config) {
        $scope.tests = data;
    })
    .error(function(data, status, headers, config) {});

Output from inspect element

<select 
    class="form-control ng-valid ng-dirty" 
    ng-model="formData.selected_tests" 
    ng-options="c.test for c in tests" 
    multiple="true" 
    ng-multiple="true" 
    name="tests" 
    id="tests" 
    size="0" 
    ng-size="7">
        ... Options ...
</select>

Notice how size attribute remains at 0, however ng-size changes to 7 despite the same interpolated tests.length being used.

Further, despite there being a total of 7 options, the browser rendered size only displays 4 options.

Manually changing size="0" to size="7" within google chrome's element inspector, changes the size of the select.

Nikos Paraskevopoulos · Accepted Answer · 2014-04-29 11:03:22Z

5

I had some problems with @size. Try ng-attr-size, as:

<select
    ...
    ng-attr-size="{{ tests.length }}">
</select>

answered Apr 29, 2014 at 11:03

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gravy Over a year ago

Thanks!!! Is that in the docs??? I didn't even know that existed... will accept answer as soon as able to.

schmijos · Accepted Answer · 2014-10-23 16:23:33Z

0

Actually it is data-ng-attr-size="{{ tests.length }}".

The github issue 1619 describes this problem. It seems to be solved since angularjs 1.1.4 in this commit. There's an example for usage on plunker.

answered Oct 23, 2014 at 16:23

schmijos

8,8434 gold badges54 silver badges60 bronze badges

Collectives™ on Stack Overflow

AngularJS Bug? - Select Multiple - Dynamically set size dependent on number of options

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related