如何使用离子型框架来定制angularJS一个下拉列表 [英] How to customise a dropdown list in angularJS using ionic framework

问题描述

我是新来的都AngularJs和离子的框架。我想创建一个下拉列表组件。我能做到这一点与下面code。

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>

不过，我需要自定义的用户界面相匹配的谷歌风格的规范。我该怎么办呢？我需要用下面的外观和感觉的下拉列表。

推荐答案

这可以通过实现
AngularMaterial

请正确安装，我只是大概展示

make proper installation, i am just showing roughly.

index.html的：

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

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.

这篇关于如何使用离子型框架来定制angularJS一个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！