首先,是的,我已经尝试使用谷歌搜索,但仍然很难找到有关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
我以前做过这个,但我不记得怎么样,我记得它只是很少的代码行.
解决方法
如果您一次只需要一个,可以使用：
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>
