CODEWITHSUNDEEP
angularjsionic-framework
Tinjzz
Tinjzz

Reputation: 97

How to customise a dropdown list in angularJS using ionic framework

I am new to both AngularJs and ionic framework. I am trying to create a drop down list component. I was able to do that with the below code.

HTML:

<ion-view title="Drop down list">
      <ion-content>
          <div class="list list-inset">
              <label class="item item-input item-select">
                  <div class="input-label">
                      &nbsp;
                  </div>
                  <select>
                      <option selected>State 1</option>
                      <option >State 2</option>
                      <option>State 3</option>
                      <option>State 4</option>                      
                  </select>
              </label>
          </div>
        </ion-content>
  </ion-view>

But, I need to customise the UI to match the google style specification. How can I do that? I need a dropdown list with the below look and feel. enter image description here

Upvotes: 2

Views: 13745

Answers (2)

the_mahasagar
the_mahasagar

Reputation: 1201

this can be achieved by AngularMaterial

make proper installation, i am just showing roughly.

index.html :

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/angular-material/angular-material.css">

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->

<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-aria/angular-aria.js"></script>
<script src="lib/angular-material/angular-material.js"></script>

app.js

angular.module('myApp', ['ngMaterial']);

Drop down list can been done in below way:

<md-input-container >
      <md-select ng-model="mode"  ng-change="toggleSearch()">
          <md-option  selected="selected" >State 1</md-option>
          <md-option >State 2</md-option>
      </md-select>
 </md-input-container>

Hope this will help you and its properly working in my app.

Upvotes: 1

Himanshu K
Himanshu K

Reputation: 224

May be this might help you get a drop down list: http://ionicframework.com/docs/components/#select

Upvotes: 1

Related Questions