我正在使用离子框架设计选择框。我按照以下链接了解了离子选择组件的使用。
在上面显示的演示仿真器链接中,选择工作正常,点击选择弹出窗口。但当我试图使用相同的代码时,它无法正常工作。组件正确呈现并且弹出窗口未显示。
这是我的代码:
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