Question

我想要切换b / w两个图标。例如：当我点击网格图标时，它将显示网格数据并隐藏列表图标。当我点击相同的图标时，它将显示列表数据并隐藏网格图标。

这是我在Tabs.html中的代码

 <div menu-toggle="right" ng-hide="data.grid = !data.grid">>

我发现http://codepen.io/mhartington/pen/zxpwbK2但它与Buttons有关。

Answer 1

同时需要展示，需要隐藏一个，因为你可以使用ng-show和ng-hide

<div menu-toggle="right" ng-hide="data.grid = !data.grid">

for grid:

 <div class="" ng-hide="data.grid = !data.grid">


for icon:

<div class="" ng-show="data.grid = !data.grid">

Answer 2

根据我的理解，我认为这是你所期待的。

   <ion-view view-title="Icon Sample">
      <ion-header-bar>
        <h1> Icon sample </h1>
      </ion-header-bar>
      <ion-content>
       <button class="button button-icon" ng-click="toggleIcon()">
        <i class="icon" ng-class="isToggled ? 'ion-ios-list-outline' : 'ion-grid'"></i>
        {{buttonText}}</button>
     </ion-content>
   </ion-view>

和控制器代码如下：

    .controller('sampleCtrl', function($scope){
     $scope.isToggled = true;
     $scope.buttonText = 'List';
     $scope.toggleIcon = function(){
     if($scope.isToggled){
       $scope.isToggled = false;
       $scope.buttonText ='Grid';
     }
    else{
     $scope.isToggled = true;
     $scope.buttonText ='List';
   }
 }
});

http://codepen.io/svswaminathan/pen/ByPKgp

查看此codepen示例以查看它是否符合您的要求。这只是在按钮内交替切换图标的代码。我相信您已经能够正确加载数据

在子标题中的标签中切换图标

2 个答案: