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. Intent调用常见系统组件

    // 调用浏览器 Uri webViewUri = Uri.parse("http://blog.csdn.net/zuolongsnail"); Intent intent = ...

  2. 洗礼灵魂，修炼python（34）--面向对象编程（4）—继承

    前面已经说到面向对象编程有封装,继承,多态三大特性,那么其中的继承则很重要,可以直接单独的拿出来解析 继承 1.什么是继承: 字面意是子女继承父母的家产或者特性等.而在编程里继承是指子类继承父类(基类 ...

  3. ws协议的配置

    server { listen 80; server_name 域名或IP; rewrite ^(.*)$ https://$host$1 permanent; } server { listen 4 ...

  4. python 报错RuntimeError: dictionary changed size during iteration

    a = {':0} for b in list(a.keys()): if a[b] == 0: del a[b] print(a) 报错是因为在字典迭代期间改变字典大小 我们可以通过取出字典的键值, ...

  5. python曲线拟合

    http://blog.sina.com.cn/s/blog_aed5bd1d0102vid7.html 1.多项式拟合范例: import matplotlib.pyplot as plt impo ...

  6. Kubernetes的搭建与配置（一）：集群环境搭建

    1.环境介绍及准备: 1.1 物理机操作系统 物理机操作系统采用Centos7.3 64位,细节如下. [root@localhost ~]# uname -a Linux localhost.loc ...

  7. VMware虚拟机中CentOS 7的硬盘空间扩容

    查看centos7系统挂载点信息 扩展VMWare-centos7硬盘空间 对新增加的硬盘进行分区.格式化 添加新LVM到已有的LVM组,实现扩容 1.查看centos7系统挂载点信息 df -h查看 ...

  8. 安全之路 —— 无DLL文件实现远程线程注入

    简介         在之前的章节中,笔者曾介绍过有关于远程线程注入的知识,将后门.dll文件注入explorer.exe中实现绕过防火墙反弹后门.但一个.exe文件总要在注入时捎上一个.dll文件着 ...

  9. tidb集群某个节点报错之：node_exporter-9100.service failed

    今天启动集群tidb时出现一个错误,是某个tikv节点报错:node_exporter-9100.service  failed 一个节点的问题会导致整个集群启动失败.去此节点下的日志文件中查找,发现 ...

  10. PHP实现一个简陋的注册登录页面

    PHP实现一个简陋的注册登录页面 今天来水一篇没有**用的 /滑稽脸,代码简陋臃肿考虑不全,各位大佬轻喷,还望不吝赐教. 首先考虑了一下需要至少四个页面:register.html.register. ...