AngularJS, эквивалентный jQuery toggle показать/скрыть раздел

Question

Во-первых, да, я пробовал поиск по Google, но до сих пор сложно найти информацию об AngularJS.

Я хочу создать простую задачу открытия разделов на основе того, какая кнопка нажата в форме. Я хочу, чтобы только один раздел был открыт в любое время и, возможно, по умолчанию (не решил). Было бы неплохо, если кнопка, которую вы нажмете, будет классифицирована как «btn-primary» для начальной загрузки. Так что это 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> 

В JQuery я хотел бы сделать что-то вроде этого (упрощенный и не самое лучшее решение, просто объяснить):

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

Я сделал это однажды, но я могу» Не помню, как, я помню, это было очень немного строк кода.

Answer 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