Bind 'select' element size to array length

Question

I have a select element that is being filled with anywhere from 20-50 names. Currently, the number of elements being displayed is 3 and there is a scrollbar that allows the user to scroll up and down to make the desired selections. Is there a way I can bind the array's length to the size property as well as include an if statement? For example, if I have less than 25 names set the size of the select box to 10, otherwise set the size of the select box to 20.

<select size="3" multiple="multiple" id="selectMultiple" style="margin: 5px 0px; width:50%">
     <option ng-repeat="value in scope.Names">{{value.Name}}</option>
</select>

Any help would be great!

Define a function that would return size value and call it using ng-size="{{functionName}}" instead of size attribute — MJN
– MJN, Commented Jul 20, 2017 at 19:40

Vivz · Accepted Answer · 2017-07-20 19:48:53Z

2

You can use interpolation operator

<select size="{{size}}" multiple="multiple" id="selectMultiple" style="margin: 5px 0px; width:50%">
     <option ng-repeat="value in scope.Names">{{value.Name}}</option>
</select>

in your controller

$scope.size=($scope.Names.length>25?20:10);

You can also use ng-size attribute like

<select ng-size="{{size}}" multiple="multiple" id="selectMultiple" style="margin: 5px 0px; width:50%">
     <option ng-repeat="value in scope.Names">{{value.Name}}</option>
</select>

edited Jul 20, 2017 at 19:48

answered Jul 20, 2017 at 19:38

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

2 Comments

SQL and Java Learner Over a year ago

Thanks for the help!

SQL and Java Learner Over a year ago

If the size property or ng-size directive did not work for you, check out the ng-attr-size property mentioned by Pankaj Parkar below.

Pankaj Parkar · Accepted Answer · 2017-07-21 12:44:17Z

2

You could use {{}} interpolation directive inside size attribute, or better would be use ng-attr-size directive to create size attribute with its value.

ng-attr-size="{{getSize(Names)}}"

I guess scope.Names should be Names

function getSize(collection){
   return collection && (Names.length > 25? 20: 10);
}

edited Jul 21, 2017 at 12:44

answered Jul 20, 2017 at 19:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

3 Comments

Vivz Over a year ago

Looks better :) +1

SQL and Java Learner Over a year ago

In one html file that I had, the above answer worked, yet in a second html file that I had it did not. Utilizing the ng-attr-size property is what fixed my issue there. I'm not sure what the difference between the two files is, but if ng-size is not working I would use the ng-attr-size property.

Pankaj Parkar Over a year ago

@SQLandJavaLearner I didn't find any documentation on ng-size though, even documentation is mentioned to use ngAttrSize

Collectives™ on Stack Overflow

Bind 'select' element size to array length

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related