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. Python 解决Python安装包时提示Unable to find vcvarsall.bat的问题

    解决Python安装包时提示Unable to find vcvarsall.bat的问题   by:授客 QQ:1033553122 问题 Python安装包时,提示Unable to find v ...

  2. Android 高德地图定位

    创建Key 打开高德开发平台 → 我的应用 → 创建应用 → 创建新Key 说明: 1.发布版安全码获取:用自己的签名打包成apk安装软件,用SHA1工具查看 2.调试版安全码获取: 直接运行安装软件 ...

  3. (网页)angular js 终极购物车(转)

    转自CSDN: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 将你的 Virtual dom 渲染成 Canvas

    项目概述 一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中.支持常规的滚动操作和一些基础的元素事件绑定. githu ...

  5. 用PRODUCT_COPY_FILES拷贝文件夹

    拷贝文件PRODUCT_COPY_FILES += device/qcom/msm8909/media/media_profiles_8909.xml:system/etc/media_profile ...

  6. Scala多重继承及AOP

    package traitandclass /** * Created by zhen on 2018/8/23. */ class Human { println("Human" ...

  7. django学习之命令

    1.启动一个django项目: $ django-admin startproject <project-name> 2.创建一个应用: $ python manage.py starta ...

  8. 洗礼灵魂，修炼python（13）--模块random，math，pickle

    random 1.作用: random模块用于生成随机数 2.常用函数: random:用于生成一个0到1的随机符点数: 0 <= n < 1.0 uniform(a, b):用于生成一个 ...

  9. python第二十二天-----在做作业当中............

    作业 1, ATM:模拟实现一个ATM + 购物商城程序 额度 自定义实现购物商城,买东西加入 购物车,调用信用卡接口结账可以提现,手续费5%支持多账户登录支持账户间转账记录每月日常消费流水提供还款接 ...

  10. Error: spawn Unknown system errno 203

    在用node写代码的时候发现这个错误,google之无解,现在解决,发于此. 事件起因为一个全局模块通过子进程(chind_process)调用另一个全局模块的命令,这个错误就是在命令行通过全局命令调 ...