下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。

HTML 代码

<ion-header-bar class="bar-positive">
 <h1 class="title">开关切换</h1></ion-header-bar>
 <ion-content>
 <div class="list">
 <div class="item item-divider">
 Settings </div>
 <ion-toggle ng-repeat="item in settingsList"
 ng-model="item.checked"
 ng-checked="item.checked">
 {{ item.text }} </ion-toggle>
 <div class="item">
 <!-- 使用 pre 标签展示效果更美观 -->
 <div ng-bind="settingsList | json"></div>
 </div>
 <div class="item item-divider">
 Notifications </div>
 <ion-toggle ng-model="pushNotification.checked"
 ng-change="pushNotificationChange()">
 Push Notifications </ion-toggle>
 <div class="item">
 <!-- 使用 pre 标签展示效果更美观 -->
 <div ng-bind="pushNotification | json"></div>
 </div>
 <ion-toggle toggle-class="toggle-assertive"
 ng-model="emailNotification"
 ng-true-value="'Subscribed'"
 ng-false-value="'Unubscribed'">
 Newsletter </ion-toggle>
 <div class="item">
 <!-- 使用 pre 标签展示效果更美观 -->
 <div ng-bind="emailNotification | json"></div>
 </div>
 </div>
 </ion-content>

由于pre标签冲突，实例中的 pre 已替换为 div标签，具体可以在"尝试一下"中查看。

JavaScript 代码

angular.module('ionicApp', ['ionic']).controller('MainCtrl', function($scope) {
 $scope.settingsList=[
 { text: "Wireless", checked: true },
 { text: "GPS", checked: false },
 { text: "Bluetooth", checked: false }
 ];
 $scope.pushNotificationChange=function() {
 console.log('Push Notification Change', $scope.pushNotification.checked);
 };
 $scope.pushNotification={ checked: true };
 $scope.emailNotification='Subscribed';
 });

css 代码：

body {
 cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;}

效果如下所示：

ionic 单选框操作

ionic 手势事件

onic

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

ionic 特点

• 1.ionic 基于Angular语法，简单易学。

• 2.ionic 是一个轻量级框架。

• 3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。

• 4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

• 5.ionic 专注原生，让你看不出混合应用和原生的区别

• 6.ionic 提供了强大的命令行工具。

• 7.ionic 性能优越，运行速度快。

学习前你需要了解？

学习前你需要了解以下基础知识：

• HTML

• CSS

• Javascript

• Angular

着 HTML5 在 2014 年的推出，HTML 已经确定了它的地位。Ionic Framework 的开发者马上就认识到，这是将 HTML5 用于原生和混合应用开发平台的好时机。他们的口号是“构建一次，在任何地方运行”。

使用一个开源的 SDK，开发者可以为 iOS 和 Android（是的，还包括 Blackberry）创建 Ionic Framework app。而且，Kumulos Cordova SDK 现在已与 Ionic 框架集成，因此不应再为制作“劣质”的 app 找借口。

下面将介绍 5 个使用 Ionic 框架构建优秀 app 的技巧。

1、使用 Creator

为什么要让事情变得更加困难？不想屈服于编写脏代码？你是否更像一个可视化开发者？那么，Ionic Creator 就是为你而生的。Ionic Creator 是一个拖放的界面工具，只需点击几下鼠标，便可将你的想法应用到 app。

通过 Creator，Ionic 为开发者提供了一个现成的组件库，开发者可以尽情使用他们。app 设计完成后，可将它分享给同事以交流意见和建议。除此之外，还可以轻松导出你的 Creator 项目至原生 IPA 和 APK 文件，以直接安装在设备上。

创作者还可以通过应用程序的想法，更容易地销售您的客户端 - 使用内置的功能，如“添加朋友”，让客户（或潜在的客户端）检查应用程序，同时仍在开发中提供其输入。 更不用说比尝试让非技术人员使用Testflight更容易了。

Creator 还可以让你在 app 中更容易向别人展示 app —— 使用内置的功能，如“添加好友”，即使 app 仍在开发期间，也可以让客户（或潜在的客户）查看 app 并提供输入功能。这比让非技术人员使用 Testflight 更容易。

2、使用文档

每个人都会和你说 RTFM(Read The Fucking Manual)。但是，在 Ionic 中却从不会出现这种情况。为什么？因为Ionic 的文档确实很好。事实上，你可以复制文档中的部分代码，并将其直接用于你的 app。为什么当有现成的代码在你面前时，还要花时间为头像编写一个显示列表？当然，你可能需要修改代码，但这是快速开发的好方法。

3、自定义组件

Ionic 中的组件库是一个真正节省时间的利器。然而，它也是一把双刃剑 —— 因为 Ionic 组件是如此容易使用，每个人都可以使用它，这就使得你的 app 看起来会和其他人的是如此相似。但是可以通过引入一些自定义的 CSS 并调整一些 Ionic 预定义类以创建自己的样式来避免此问题。

4、让 Ionic 接手“控制权”

使用 Ionic 框架开发 app，最好的地方是你不需要每一件事都亲自去做。

针对 iOS 和 Android（和 Blackberry），制作多种不同格式的启动页可能会十分痛苦。使用 Ionic，只需要设计合适的 app 图标即可，有更多的重要的事需要去做。不用担心，它的使用很简单，通过使用 Ionic CLI，只需在平台目录中放置合适的文件即可（Ionic 可与 .png, Photoshop, 和 Illustrator 格式兼容），这样就可以轻松为 iOS 和 Android 生成 app 图标和启动页界面。

5、朝着原生的方向

将 app 无缝集成到操作系统中，是为用户提供优秀体验的最好办法之一。通过使用 Platform Device Class，Ionic 变得更易执行此操作。iOS, Windows Phone, iPad, 和 Android 都有它们自己的特定类，以便在 app 运行时给予 Ionic app 原生的外观和感觉。这些类可以在不同操作系统版本之间的 iOS 和 Android 上进一步细分。

这并不是全部

当然，上面提到的亮点并不是 Ionic 内置的所有优秀特性。正如开发者喜欢在文档中说的，“使用 Ionic 的可能性是永无止境的”，但我希望至少能给大家提供几个关于如何构建优秀的 Ionic Framework app 的想法。

译自：https://dzone.com/