Ionic directive fancySelect

Question

I am using fancySelect https://github.com/tipstrade/ionic-fancy-select and Ionic framework for multiple select options.

I am kind of new to Ionic framework.

Issue: I want some of the items in fancySelect to be selected by default.

Code Pen: http://codepen.io/anon/pen/QjydZd?editors=101

How do I do that ?

Any help is appreciated.

enter code here

Thanks, DS

for example -- in the code pen, when the page loads, I want a country to be selected by default. How do I do it? Any idea? — Raju
not sure if I understand you correctly, you want that's what's inside the modal to be shown as a landing page ? — macrog

Evan Evan · Accepted Answer · 2015-09-25T19:27:15

It's mostly AngularJS, not Ionic. When you initialize your array of items that will be used in the select, set item.checked = true; See line 164 in the js source and lines 78+ in the HTML source in the codepen.

<script>
var $scope.countries = [
  {id: 1, name: 'United States', checked: true},
  {id: 2, name: 'Germany',       checked: false}
]
</script>


<ion-toggle
     ng-repeat="item in items"
     ng-if="multiSelect"
     ng-checked="item.checked"
     ng-model="item.checked"
     class="item item-text-wrap">

If you want to do it with the single select, you'll have to add an angular expression that sets a css class:

ng-class="{selected : item.checked}"

So the label becomes:

<!-- Single select -->
<label
   ng-repeat="item in items"
   ng-if="!multiSelect"
   class="item item-text-wrap"
   ng-class="{selected : item.checked}"
   ng-click='validateSingle(item)'>

Add a class to your stylesheet to highlight selected countries when the modal opens:

.selected {
  background-color: red !important;
}

And if you want to have the selected country appear as the label for the fancy select, something like this would/could work:

$scope.countries_text_single = $scope.countries[0].name;

Ionic directive fancySelect

1 Answers