Followed this CodePen http://codepen.io/aaronksaunders/pen/XJeayJ and made mods to fit my scenario.
HTML
<label class="item item-input item-select">
{{ categorySelectedItem.Item.ItemCategory }}
<select ng-options="category.ItemCategory for category in categories track by category.CategoryID"
ng-model="categorySelectedItem.Item">
</select><br/>
</label><br/>
Scope Data
$scope.categories =
[{"$id":"1"
,"CategoryID":1
,"ItemCategory":"Select Category"}];
$scope.categorySelectedItem = {
isPresent : true,
Item : {"$id":"1" // <-- this is the default item
,"CategoryID":1
,"ItemCategory":"Select Category"}
};
I get:
Category
Select Category Select Category <imagined drop down arrow>
I’d like to suppress the Select Value (second Select Category text) just like the example in the CodePen. It should only appear when the drop down is clicked.
I tried applying the class in the label to the select instead. However, the drop-down lost the fancy ionic style and it didn’t expand the width of the page.