jQuery toggle için AngularJS eşdeğeri bir bölümü göster/gizle

Question

Öncelikle, evet bunu denedim ama AngularJS hakkında bilgi bulmak hala zor.

Formda hangi düğmeye basıldığına bağlı olarak basit bir açma bölümü görevini önceden oluşturmak istiyorum. Sadece bir bölümün her an açık olmasını ve belki de bir varsayılanın olmasını istiyorum (karar vermedim). Ayrıca, tıklattığınız düğmenin önyükleme için "btn-primary" olarak sınıflandırılması yararlı olacaktır. '

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

Daha önce bir kez yaptık ama can: Yani bu ben (Sadece açıklamaya basitleştirilmiş ve en iyi çözümü) böyle bir şey yapacağını jQuery yılında

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

html Hatırlıyorum, hatırladım, çok az kod satırı vardı.

Answer 1

sadece bir tane gerekiyorsa bir zaman kullanabilirsin Bu: 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

a Look yollarından 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

Bol atın. Bunlardan biri (kullanarak 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