Ionic Js六:切换开关操作

以下实例中,通过切换不同开关 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;
}

?

?

时间: 2024-11-04 18:00:55

Ionic Js六:切换开关操作的相关文章

Ionic Js九:列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list> <ion-item ng-repeat="item in items"> Hello, {{item}}! </ion-item> </ion-list> 高级用法: 缩略图,删除按钮,重新排序,滑动 <ion-list ng-contr

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

js数组的操作及数组与字符串的相互转化

数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/(.)(?=[^$])/g,"$1,").split(",");       //字符串转化为数组 var obj2 = "new2abcdefg".split("");                              

原生js和Jquery操作DOM

原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一

Ionic Js十一:模态

ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title&l

js数组的操作

转载 js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手,一下狠心,我学!呵呵.学了之后才知道,js数组的功能强大很,远比VB,C#强多了,大家慢慢看吧 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限

node.js连接MySQL操作及注意事项

node.js作为服务端的js运行环境已经出现了有几年了,最近我有个朋友也在做这方面的开发,但是也是刚刚接触,遇到了很多坑.前几天他们在操作数据库的时候出现了点问题,后来我们一起看了看,其实都是node本身机制的一些问题,这里总结一下给新手做借鉴. 我朋友的数据库采用的是MySQL.(至于为什么不用mongoDB,这个是公司上层选型的结果,因为很多新手朋友似乎总是觉的node.js就是应该和mongoDB联系在一起,所以这里简单说下).我后来写了一个简单的小例子,整个小例子使用了express框

js css样式操作代码(批量操作)

js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. 我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 复制代码 代码如下: var element= document.getElementById(”id”); element.style.width=”20px”; element.style.he

JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件. CSS:主要用来控制页面以及上面控件的样式. JS:主要用来控制页面上的特效以及数据交互. JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致. JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合. JS的简单操作: DOM操作: 一.window: 1.window.onload 页面打开完再执行后面的操作 2.window.open(1,2,3,4) - 打开新页面, 1 - 打开页