Как добавить активный класс в ионный + угловой?

Не могли бы вы рассказать мне, как добавить активный класс в выбранную кнопку. При использовании кнопки выбрать любую кнопку с панели инструментов, это станет зеленым и показать данные. Фактически у меня есть четыре кнопки и четыре div contend. Мне нужно показать div contend, когда я выберите кнопку. Иными словами, когда я нажимаю «A button» это шоу «A contend». Когда я нажимаю кнопку «B», он показывает «b contend». Теперь кнопка b активна, остальные неактивны. Мы можем сделать это угловое .Я пытался сделать с помощью нг-если но успеха до сих пор вот мой кодКак добавить активный класс в ионный + угловой?

<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

источник

2015-05-30 user944513

Обновлено codepen с рабочим примером, настройки стилей по мере необходимости http://codepen.io/anon/pen/PqWJrv

Это может быть сделаны полностью в HTML, не код контроллера необходимо (если вы не хотите вкладки по умолчанию, а затем добавить $ scope.activeButton = «а «; в контроллере). Вы должны можете следить за переменной $ Объем и использование нг-класса

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

установить, что с каждой кнопкой и нг-класса будет заботиться обо всем остальном. Хорошая вещь с директивами - вы можете многое сделать только в своем html без написания кода в контроллере.

Вы можете сделать то же самое с областями содержимого с одной и той же переменной, чтобы держать его просто:

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

источник

2015-05-30 05:56:47

не могли бы вы дать код пера – user944513

Добавлено обновление codepen –

Одна из проблем является то, что с нг щелкните Я считаю, что вам нужно иметь скобки для выполнения функции контроллером , например:

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

Что касается использования нг-если против нг-шоу:

«Директива ngIf удаляет или воссоздает часть дерева DOM на основе выражения»

«Директива ngShow показывает или скрывает данный HTML-элемент на основе выражения, предоставляемого атрибуту ngShow».

<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>

...

Таким образом, вы не должны управлять установкой отдельных переменных в ложь, чтобы скрыть другие дивы.

источник

2015-05-30 06:04:43 errata

спасибо, могли бы вы просить код pen ..Я думаю, вам лучше подойти – user944513

как добавить активный класс – user944513

вы можете либо добавить «активный» класс, как в ответ ниже, либо использовать метод углового ng-show – errata

Как добавить активный класс в ионный + угловой?

ответ

Смежные вопросы