AngularJS相当于jQuery的toggle显示/隐藏一个section
AngularJS equivalent to jQuery toggle show/hide a section
首先,是的,我试过谷歌一下,但是仍然很难找到关于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>
看看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){
}
方法很多。其中之一(使用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;
};
}
);
恰好
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 使用类从一个标记中双击事件
- Javascript,访问一个主要对象模块模式中的每个对象
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 我应该如何从xml文件构建一个javascript页面
- 如何在jquery中读取Section中的最后一个元素
- AngularJS相当于jQuery的toggle显示/隐藏一个section