Ionic Angularjs - 更改选项卡按钮上的离子图标（使用 ng-class）答案

【问题标题】：Ionic Angularjs - Change ion-icon on Tab button (with ng-class)Ionic Angularjs - 更改选项卡按钮上的离子图标（使用 ng-class）
【发布时间】：2015-10-12 19:54:30
【问题描述】：

我正在尝试将 Tab 上的图标从 "ion-social-google-outline" 更改为 "ion-social-google" em> 点击时，却不知道怎么做...

我不能将 ion-tabs 与 icon-on 一起使用，图标关闭，因为我想在 ion-slide-box 内导航，因此我必须使用 div class="标签"

这是我的 HTML 代码：

    <div class="tabs tabs-icon-top" ng-controller="NavigateController">
          <a class="tab-item" ng-click="navSlide(0)" >
            <i class="'icon ion-social-google-outline'"></i>
            Google
          </a>
          <a class="tab-item" ng-click="navSlide(1)">
            <i class="icon ion-ios-bolt-outline"></i>
            Electro
          </a>
     </div>

这是我的控制器，用于在 Slide-Box 中的页面之间导航：

angular.module('app.controllers', [])

.controller("NavigateController", function($scope, $ionicSlideBoxDelegate) {
    $scope.navSlide = function(index) {
        $ionicSlideBoxDelegate.slide(index, 500);
    }
});

如何更改标签图标？

【问题讨论】：

标签： angularjs ionic-framework ionic

【解决方案1】：

最好的方法是在<ion-tabs> 标签中使用icon-on 和icon-off 属性。很像这样：

<ion-tabs>
    <ion-tab title="" href="#" icon-on="ion-gear" icon-off="ion-gear-outline">
        Tab Name
    </ion-tab>
</ion-tabs>

编辑：

我不明白为什么不这样做，但我想如果你根本做不到，那就做这样的事情：

在您的控制器中：

$scope.$state = $state;

HTML：

<i ng-class="{$state.current.name == 'tab 0': 'ion-ios-gear-outline', $state.current.name !== 'tab 0': 'ion-ios-gear'}"

【讨论】：

我说我不能用
为什么不能在 ion-slide-box 内使用？
对不起，我不知道为什么我昨天不能将与 Slide-Box 一起使用，但是你说得对，我得到了它与 :) 感谢各位的帮助！
很高兴它成功了。昨天不让它工作一定是一件很奇怪的事情。

【解决方案2】：

这是我编写的应用程序的示例：

 <i style="vertical-align: middle !important; float: left; padding-right: 10px; padding-top: 0px, padding-bottom: 0px;" ng-class="{'ion-qr-scanner': item.Status == 'OPEN', 'stopiconopen': item.Status == 'OPEN', 'ion-checkmark-circled': item.Status == 'ARRIVED', 'stopiconarrived': item.Status == 'ARRIVED'}"></i>

如果您查看ng-class，它的工作原理是这样的{'the name of the class you want to apply', : the epxression to be evaluated}

所以在你的情况下，如果 icon-on 正在切换 true 和 false，你可以说

ng-class="{'icon-on-icon': icon-on, 'icon-off-icon': !icon-on}"

【讨论】：