app中如果有服务端推送过来的消息，用户没有查看的话，出现一个数字提醒，类似微信的那种效果。

在Ionic中的实现过程还是很简单的：

  <ion-tab title="首页" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home" badge="badges.carts" badge-style="badge-assertive">

    <ion-nav-view name="home-tab"></ion-nav-view>

  </ion-tab>

其中最主要的部分是: badge="badges.carts" badge-style="badge-assertive"

这里的 badges.carts不同于以往的用{{表达式}}，不需要"{{}}"部分，直接写属性即可

在controller里定义以下代码

$scope.badges = { carts: 4 };

如果carts的值为0的话，是不会有提示的，如果>0,才会出现红色圆点提示。

通过这样设置 $scope.badges变量，我们就可以根据业务的需要进行灵活的操作了，果然是很方便。

Ionic 中badge的应用的更多相关文章

  1. ionic中获取坐标方法

    ionic中获取坐标的方法 1.首相需要执行命令: cordova plugin add cordova-plugin-geolocation2.然后块级注入配置bower文件引入ngCordova ...

  2. ionic中的生命周期函数

    //ionic中的生命周期函数 onPageLoaded(){ //page初始化时 console.log("page 1 : page loaded"); } //在这里可以做 ...

  3. Ionic中弹窗

    Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一 ...

  4. ZH奶酪：Ionic中（弹出式窗口）的$ionicModal使用方法

    Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...

  5. ionic中android的返回键

    ionic中android的返回键 在ionic框架中已经注册了几个返回事件,分别是 view sideMenu modal actionSheet popup loading 他们的优先级分别是 v ...

  6. 解决 ionic 中的 CORS（跨域）

    译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使用或 ...

  7. angular 图片加载失败 情况处理？ 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  8. gulp在ionic中的使用

    简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm instal ...

  9. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

随机推荐

  1. 利用火车头采集A67手机电影教程一

    今天将讲述:利用火车头采集A67手机电影,并导入到网站中,如果你要更多更快的教程,请访问:http://www.it28.cn/category-191.html 现在以A67中的电影中的动作片为例: ...

  2. 二层协议--MPLS协议总结

    1.MPLS是介于2层和3层之间的协议,主要应用在城域网中,作为集客专线.基站等承载VPN技术的关键技术. 2.MPLS利用MPLS标签进行转发,先通过IP单播路由的方式沿途分配好MPLS标签,分配完 ...

  3. 网络基础 Windows控制台下Ftp使用简介

    Windows控制台下Ftp使用简介 by:授客 QQ:1033553122 测试环境: ftp服务器所在主机ip:172.25.75.2 ftp用户目录:F:\ftp   C:\Users\laif ...

  4. Android深入四大组件（七）Service的绑定过程

    前言 我们可以通过调用Context的startService来启动Service,也可以通过Context的bindService来绑定Service,建议阅读此篇文章前请阅读Android深入四大 ...

  5. [iOS]深入理解GCD

    看到一篇很好的文章,本来想翻译的,但发现已经有人翻译了,遂简单整理了一下,方便阅读学习 新博客[wossoneri.com] 什么是GCD GCD(Grand Central Dispatch)是li ...

  6. (后端)sql server 按时间段查询

    百度的资料,保存下来: 在写按时间段查询的sql语句的时候 一般我们会这么写查询条件: where date>='2010-01-01' and date<='2010-10-1'. 但是 ...

  7. 在Java中调用C/C++本地库

    JNI是Java Native Interface的英文缩写, 中文翻译为本地调用, 自从Java 1.1开始就成为了Java标准的一部分. C/C++是系统级的编程语言, 可以用来开发任何和系统相关 ...

  8. C#语言————选择结构

    int[] num = new int[] {23,76,54,87,51,12 }; //冒泡排序 for (int i = 0; i < num.Length - 1; i++) { for ...

  9. 从列表和实例来了解python迭代器

    什么是迭代器?它是一个带状态的对象,在你调用next()方法的时候返回容器中的下一个值,任何实现了__iter__和__next__()(python2中实现next())方法的对象都是迭代器,__i ...

  10. 实现strStr()的golang实现

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...