如何在angularJS中使用ionic框架自定义下拉列表?

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.

我对AngularJs和ionic framework都不熟悉。我正在尝试创建一个下拉列表组件。我可以用下面的代码做到这一点。

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.

但是，我需要定制UI以匹配谷歌样式规范。我怎么做呢?我需要一个下拉列表，如下图所示。

2 个解决方案

#1

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

这可能有助于您获得下拉列表:http://ionicframework.com/docs/components/#select ?

#2

this can be achieved by AngularMaterial

这可以通过天使材料实现

make proper installation, i am just showing roughly.

做适当的安装，我只是粗略地展示。

index.html :

索引。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.

希望这能帮助你和它在我的应用中正常工作。

#1