离子离子选择指令不起作用

时间:2016-07-25 14:46:24

标签: javascript html angular ionic-framework

我正在使用离子框架设计选择框。我按照以下链接了解了离子选择组件的使用。

ion-select component

在上面显示的演示仿真器链接中,选择工作正常,点击选择弹出窗口。但当我试图使用相同的代码时,它无法正常工作。组件正确呈现并且弹出窗口未显示。

这是我的代码:

HTML:

        <html ng-app="ionicApp">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

        <title>{{myTitle}}</title>

        <link href="http://code.ionicframework.com/1.0.0-beta.2/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0-beta.2/js/ionic.bundle.js">
        </script>
    </head>

    <body ng-controller="MyCtrl">
        <ion-header-bar class="bar-positive">
            <h1 class="title">ION Select </h1>
        </ion-header-bar>

        <ion-content padding="true">
            <h2>Ion Select</h2>
            <ion-item>
                <ion-label>Gender</ion-label>
                <ion-select [(ngModel)]="gender">
                    <ion-option value="f" checked="true">Female</ion-option>
                    <ion-option value="m">Male</ion-option>
                </ion-select>
            </ion-item>

        </ion-content>

    </body>

    </html>

CSS

body {
 cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

JS

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
 $scope.myTitle = 'ION SELECT'; 

});

我也为同一个创建了一个codepen示例请找到以下链接: ion-select Codepen

0 个答案:

没有答案