Question

请告诉我如何在选中的按钮中添加活动课程。当使用工具栏中的任何按钮时，它变为绿色并显示数据。实际上我有四个按钮和四个div竞争。我需要当我选择按钮时显示div竞争。换句话说，当我点击“A按钮”时，它会显示“A contend”。当我点击“B按钮”时，它会显示“b contend”现在b按钮主动休息是非活动的。我们可以做这个角度。我尝试使用 ng-if 但是成功到现在为止这是我的代码

<html ng-app="ionicApp">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title>Tabs Example</title>
      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
   </head>
   <body>
   </body>
   <ion-view ng-controller="showhidecntr">
      <ion-header-bar align-title="center" class="bar-balanced">
         <div class="buttons">
            <a class="button icon-left ion-chevron-left button-clear">Back</a>
            <!--i style="font-size:30px;" class='icon ion-chevron-left'></i-->
         </div>
         <h1 class="title">Title</h1>
      </ion-header-bar>
      <ion-content>
         <div class="button-bar">
            <a class="button button-small"  ng-click="AbuttonClick">a </a>
            <a class="button button-small"  ng-click="BbuttonClick">b </a>
            <a class="button button-small"  ng-click="CbuttonClick">c</a>
            <a class="button button-small"  ng-click="DbuttonClick">d</a>
         </div>
         <div class="a_content" ng-if='isShowAcontend'>
            a contend
         </div>
         <div class="b_content" ng-if='isShowBcontend'>
            b contend
         </div>
         <div class="c_content" ng-if='isShowCcontend'>
            c contend
         </div>
         <div class="d_content" ng-if='isShowDcontend'>
            d contend
         </div>
      </ion-content>
   </ion-view>
</html>

http://codepen.io/anon/pen/JdErVM

Answer 1

使用工作示例更新了codepen，根据需要调整样式 http://codepen.io/anon/pen/PqWJrv

这可以完全在html中完成，不需要控制器代码（除非你想要一个默认选项卡，然后在控制器中添加$ scope.activeButton =＆＃39; a＆＃39 ;;）。您需要跟踪$ scope变量并使用ng-class

<a ng-click="activeButton = 'a'" ng-class="{ 'active': activeButton === 'a' }>A</a>
<a ng-click="activeButton = 'b'" ng-class="{ 'active': activeButton === 'b' }>B</a>

用每个按钮设置它，ng-class将处理剩下的事情。指令的好处是你可以在你的html中完成很多工作，而无需在控制器中编写代码。

您可以对具有相同变量的内容区域执行相同操作以保持简单：

<div ng-show="activeButton === 'a'">Content A</div>
<div ng-show="activeButton === 'b'">Content B</div>

Answer 2

一个问题是使用ng-click我相信你需要有一些parens来执行一个控制器功能。例如：

  <a class="button button-small" ng-click="aButtonClick()"> a </a>

关于使用ng-if vs ng-show：

“ngIf指令根据表达式删除或重新创建DOM树的一部分。”

“ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。”

  <div class="a_content" ng-if='isShowAcontend'>
     a contend
  </div>

然后在你的控制器中：

$scope.aButtonClick = function(){
  $scope.isShowAcontend = true;
  // you may have to do this as well but I'm sure there is a cleaner way to do it:
  $scope.isShowBcontend = false;
  $scope.isShowCcontend = false;    
}

更好的方法是：

<a class="button button-small" ng-click="handleButtonClick('a')"> a </a> 
<a class="button button-small" ng-click="handleButtonClick('b')"> b </a>

在您的控制器中：

$scope.handleClick = function(section){
    $scope.active_content_area = section;
}

和

<div class="a_content" ng-show='active_content_area == "a"'> a contend </div>

<div class="a_content" ng-show='active_content_area == "b"'> b contend </div>

...

这样您就不必管理将单独的变量设置为false来隐藏其他div。

如何在离子+角度中添加活动类？

2 个答案: