AngularJS equivalente a jQuery attiva/nasconde una sezione

Question

Prima di, sì, ho provato a cercare su Google, ma è ancora difficile trovare informazioni su AngularJS.

Desidero eseguire una semplice operazione di apertura di sezioni in base a quale pulsante viene premuto nel modulo. Voglio che una sola sezione sia aperta in qualsiasi momento e forse una di default (non ho deciso). Sarebbe anche bello se il pulsante su cui si fa clic sarà classificato "btn-primary" per bootstrap. Quindi questo è il 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 vorrei fare qualcosa di simile (semplificato e non la soluzione migliore solo per spiegare):

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

Ho fatto questo una volta prima ma posso' Ricordo come, ricordo che c'erano pochissime righe di codice.

Answer 1

Se avete solo bisogno uno a un tempo, puoi usare questo: 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> 

Answer 2

Prendere uno sguardo 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){ 

} 

Answer 3

molti modi. Uno di loro (utilizzando 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