Menu
I have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need.
My html code is as follows:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select> <button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button> My problem is that when the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run in Chrome, I get the following output in the console:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid"> <option value="?" selected="selected"></option> <option value="0">Item 1</option> <option value="1">Item 2</option> <option value="2">Item 3</option> <option value="3">Item 4</option> <option value="4">Item 5</option> <option value="5">Item 6</option> </select> I am wondering how I can get rid of the first option inserted by the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.
370
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.
You can use $last variable within ng-repeat directive. Take a look at doc. Where computeCssClass is function of controller which takes sole argument and returns 'last' or null .
AngularJS ng-selected Directive The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
Any time you see <option value="?" selected="selected"></option> in the select, it means that your ng-model is set to a value that isn't in the ng-options. So, if you don't want the blank option, you need to make sure item is set to a value in your itemlist. This could be as easy as having the following in your controller:
$scope.item = $scope.itemlist[0]; This will give it an inital value, and then angular will update it for you thereafter.
123
simplest way to make sure that automatically added option by angular is hidden is ng-if directive.
<select ng-options="option.id as option.description for option in Options"> <option value="" ng-if="false"></option> </select>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With