Question

我正在尝试将标签上的图标从“ion-social-google-outline”更改为“ion-social-google”点击时，但无法弄清楚如何做到这一点......

我无法将 ion-tabs 与 icon-on ， 一起使用icon-off ，因为我想在 ion-slide-box 中导航，因此我必须使用 div类= “选项卡”

这是我的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>

这是我的控制器，用于在 幻灯片框 中的页面之间导航：

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

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

如何更改标签图标？

Answer 1

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

<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'}"

Answer 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}"

Ionic Angularjs - 更改Tab按钮上的离子图标（使用ng-class）

2 个答案: