Geek Answers Handbook

AngularJS equivalent to jQuery switch show / hide section

Firstly, yes, I tried Google search, but it is still hard to find information about AngularJS.

I want to create a simple task to open sections based on which button is clicked on the form. I want only one section to be open at any time and possibly by default (not decided). It would also be nice if the button you click is classified as "btn-primary" for bootstrapping. So this is html

<form> <input type="button" id="show-section1" value="Section 1" /> <input type="button" id="show-section2" value="Section 2" /> <input type="button" id="show-section3" value="Section 3" /> </form> <section id="section1">blah</section> <section id="section2">blah2</section> <section id="section3">blah3</section>

In jQuery, I would do something like this (simplified and not the best solution to explain):

 $('section').hide(); $('#show-section1').click(function() { $('section').hide(); $('#section1').show(); }); etc

I did this once before, but I can’t remember how, as I recall, it was very few lines of code.

+6
source share
3 answers

If you just need one at a time, you can use this: http://jsfiddle.net/jHhMv/3/

JS:

 'use strict'; var App=angular.module('myApp',[]); function Ctrl($scope){ var section = 1; $scope.section = function (id) { section = id; }; $scope.is = function (id) { return section == id; }; }

HTML:

 <div ng-controller="Ctrl"> <form> <input type="button" id="show-section1" value="Section 1" ng-click="section(1)" ng-class="{'btn-primary': is(1)}" /> <input type="button" id="show-section2" value="Section 2" ng-click="section(2)" ng-class="{'btn-primary': is(2)}" /> <input type="button" id="show-section3" value="Section 3" ng-click="section(3)" ng-class="{'btn-primary': is(3)}" /> </form> <section id="section1" ng-show="is(1)">blah</section> <section id="section2" ng-show="is(2)">blah2</section> <section id="section3" ng-show="is(3)">blah3</section> </div>
+7
source

Take a look at http://jsfiddle.net/mahbub/jHhMv/

 <div ng-controller="Ctrl"> <form> <input type="button" id="show-section1" value="Section 1" ng-click="section1=!section1" /> <input type="button" id="show-section2" value="Section 2" ng-click="section2=!section2" /> <input type="button" id="show-section3" value="Section 3" ng-click="section3=!section3" /> </form> <section id="section1" ng-show="section1">blah</section> <section id="section2" ng-show="section2">blah2</section> <section id="section3" ng-show="section3">blah3</section> </div> 'use strict'; var App=angular.module('myApp',[]); function Ctrl($scope){ }
+6
source

Many ways. One of them (using AngularUI):

HTML:

 <div ng-controller="AppController"> <button ng-click="setActive('section1')" ng-class="{'btn btn-primary': active.section1}">Section 1</button> <button ng-click="setActive('section2')" ng-class="{'btn btn-primary': active.section2}">Section 2</button> <button ng-click="setActive('section3')" ng-class="{'btn btn-primary': active.section3}">Section 3</button> <section id="section1" ui-toggle="active.section1">blah</section> <section id="section2" ui-toggle="active.section2">blah2</section> <section id="section3" ui-toggle="active.section3">blah3</section> </div>

CSS

 .ui-show { opacity: 1; transition: all 0.5s ease; } .ui-hide { opacity: 0; transition: all 0.5s ease; }

JS:

 app.controller('AppController', function($scope) { $scope.active = {section1: true}; $scope.setActive = function(section){ $scope.active = {}; $scope.active[section] = true; }; } );

Plunker

+3
source

More articles:


All Articles