【问题标题】:How to implement badges in angular js如何在 Angular js 中实现徽章
【发布时间】:2016-01-25 22:06:21
【问题描述】:

我想在我的角度“离子标签”上显示一个徽章。我有一个“tabs.html”文件,其中编写了我的标签代码。

<!-- some code -->
  <ion-tab  icon-off="notificationIconDisabled" icon-on="notificationIconEnabled"  href="#/tab/newjob" badge="{{newJobsCount}}" badge-style="badge-assertive">
    <ion-nav-view name="tab-newjob"></ion-nav-view>
  </ion-tab>
<!-- some code -->

我还有另外一个文件,如 tab-setting.html、tab-myjobs.html 和 tab-newjobs.html。 “myjobs.html”和“tab-newjobs.html”正在使用控制器“jobCtrl.js”。现在,当我尝试通过“jobCtrl.js”如下设置徽章时,

$scope.newJobsCount = $scope.jobList.length;

我无法做到这一点,并且我在浏览器中收到以下错误以获取徽章

错误:[$parse:syntax] 语法错误:第 2 列的标记“{”无效键 从 [{newJobsCount}}] 开始的表达式 [{{newJobsCount}}]。

谁能帮我举个例子,如何在 Angular js 中实现徽章?

提前致谢。

【问题讨论】:

  • 你在使用iconic吗?
  • 是的...我正在使用离子。
  • @Mr. Noddy:badge="{{newJobsCount}}" 必须更改为 badge="newJobsCount"
  • 我尝试使用相同的...但它不起作用...也许我在某处犯了一些小错误.....

标签: javascript html angularjs ionic-framework


【解决方案1】:

您是否已经看过这些帖子和示例?

http://codepen.io/beaver71/pen/vLRYvb

Ionic tabs Badge

http://play.ionic.io/app/52586f24b84d

http://codepen.io/calendee/pen/knyLj/

https://forum.ionicframework.com/t/badge-icons-in-tabs/626/10

但是使用badge属性,例如:

<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about"  badge="data.badgeCount" badge-style="badge-assertive" ng-controller="AboutCtrl" >...</ion-tab>

PS:避免使用原语作为模型(这里的badge属性绑定到data.badgeCount,不仅仅是badgeCount)

【讨论】:

  • 特别是第 3 版适合您的需求。注意sintax:badge="data.badgeCount"不是badge="{{data.badgeCount}}"
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-17
  • 1970-01-01
  • 1970-01-01
  • 2021-08-08
相关资源
最近更新 更多