javascript AngularJS 相当于 jQuery 切换显示/隐藏部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15247184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS equivalent to jQuery toggle show/hide a section
提问by OZZIE
First of, yes I've tried googling this but it's still hard to find information about AngularJS.
首先，是的，我试过谷歌搜索，但仍然很难找到有关 AngularJS 的信息。
I want to preform a simple task of opening sections based on what button is pushed in the form. I want only one section to be open at anytime and maybe a default one (haven't decided). It would also be nice if the button you click will be classed "btn-primary" for bootstrap. So this is the html
我想根据表单中按下的按钮执行打开部分的简单任务。我希望任何时候都只打开一个部分，并且可能是默认的（尚未决定）。如果您单击的按钮将被归类为引导程序的“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>
In jQuery I would do something like this (simplified and not the best solution just to explain):
在 jQuery 中，我会做这样的事情（简化而不是解释的最佳解决方案）：
$('section').hide();
$('#show-section1').click(function() {
$('section').hide();
$('#section1').show();
});
etc
I've done this once before but I can't remember how, I remember it was very few lines of code though.
我以前做过一次，但我不记得是怎么做的，我记得虽然只有很少的代码行。
回答by Ven
If you just need one at a time, you can use this : http://jsfiddle.net/jHhMv/3/
如果你一次只需要一个，你可以使用这个：http: //jsfiddle.net/jHhMv/3/
JS :
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 :
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>
回答by Mahbub
Take a Look http://jsfiddle.net/mahbub/jHhMv/
看看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){
}
回答by Stewie
Plenty of ways. One of them (using AngularUI):
方法很多。其中之一（使用 AngularUI）：
HTML:
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:
CSS：
.ui-show {
opacity: 1;
transition: all 0.5s ease;
}
.ui-hide {
opacity: 0;
transition: all 0.5s ease;
}
JS:
JS：
app.controller('AppController',
function($scope) {
$scope.active = {section1: true};
$scope.setActive = function(section){
$scope.active = {};
$scope.active[section] = true;
};
}
);
