AngularJS jQueryトグルに相当する部分を表示/非表示

Question

まず、はい私はこれを検索しようとしましたが、AngularJSについての情報を見つけることはまだ困難です。

フォームにプッシュされているボタンに基づいてセクションを開く簡単なタスクを実行したいと思います。私は唯一のセクションをいつでも開くことができますし、デフォルトのセクションを開くこともできます（決定していない）。 クリックしたボタンがブートストラップのために "btn-primary"に分類されているといいでしょう。 「私は前に一度これをやったが、私はできる

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

：だからこれは私がこの（単に説明するための最善の解決策を簡素化していない）のような何かをするだろう、HTMLのjQueryで

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

ですどのように覚えています、私はそれが非常に少ないコード行だったことを覚えています。

Answer 1

あなただけの1つが必要な場合時間は、あなたが使用することができますこの：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

方法のルック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

たっぷりしてください。 （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