angularjs实现Tab栏切换效果
本文实例为大家分享了angularjs实现Tab栏切换效果的具体代码，供大家参考，具体内容如下
如图所示
选中后提交的实例代码：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="asserts/angular.js"></script>
<style type="text/css">
.div-img{
float: left;
margin:5px;
}
img{
width:200px;
height:200px;
border:2px solid pink;
}
.kongxin{
margin:0 auto;
background-color: #ddd;
width:20px;
height:20px;
border-radius: 10px;
}
.shixin{
margin:0 auto;
background-color: red;
width:20px;
height:20px;
border-radius: 10px;
}
.pic-title{
text-align: center;
}
</style>
</head>
<body ng-controller="myController">
<div class="div-img" ng-repeat="picItem in picLists">
<div class="pic-title" ng-bind="picItem.title"></div>
<img ng-src="{{picItem.url}}" alt="显示图片" ng-click="checkItems(picItem)">
<div class="kongxin" ng-if="picItem.selected"></div>
<div class="shixin" ng-if="picItem.checked"></div>
</div>
<div>
<input type="submit" value="点此提交" ng-click="choosePic()">
</div>
<div ng-bind="url"></div>
</body>
<script type="text/javascript">
var myApp=angular.module('myApp', []);
myApp.controller("myController",['$scope',function ($scope){
$scope.picLists=[
{
picName:"图片一",
url:'imgs/img1.jpg',
title:'图片标题1'
},{
picName:"图片2",
url:'imgs/img2.jpg',
title:'图片标题2'
},{
picName:"图片3",
url:'imgs/img3.jpg',
title:'图片标题3'
},{
picName:"图片4",
url:'imgs/img4.jpg',
title:'图片标题4'
},{
picName:"图片5",
url:'imgs/img5.jpg',
title:'图片标题5'
}
]
angular.forEach($scope.picLists,function(item){
item.selected=true;
})
$scope.checkItems=function(picItem){
angular.forEach($scope.picLists,function(item){
if(item.title==picItem.title){
item.checked=true;
item.selected=false;
}else{
item.checked=false;
item.selected=true;
}
})
};
$scope.choosePic=function(){
angular.forEach($scope.picLists,function(item){
if(item.checked){
$scope.url=item.url;
}
})
}
}])
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
angularJs的ng-class切换class
在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如; <span ng-class="{true: 'btn01 hover', false: 'btn01'}[isActive]" ng-click="is
-
使用AngularJS实现可伸缩的页面切换的方法
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出. 演示: http://embed.plnkr.co/PqhvmW/preview 首先,标记: <div class="page-container"> <div ng-view class="page-view&qu
-
使用AngularJS2中的指令实现按钮的切换效果
之前在AngularJS2中一种button切换效果的实现(二)中实现了按钮的切换效果,但是方法比较low,这次我们使用Angular2的指令来实现. 指令实现hover效果 import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructo
-
AngularJS路由切换实现方法分析
本文实例讲述了AngularJS路由切换实现方法.分享给大家供大家参考,具体如下: 之前有在服务器端接触到angular路由切换,今天想在本地实现路由,捣鼓半天终于成功了,特把步骤整理分享下,免得大家走弯路! 1.首先引入angular.min.js和angular-route.min.js 2.然后我们来写框架index.html,index里面装的是所有页面都有的nav导航和footer页脚(我这个demo里只有nav),模板文件page1.html,page2.html,也就是中间路由切换
-
AngularJS标签页tab选项卡切换功能经典实例详解
本文实例讲述了AngularJS实现标签页tab选项卡功能.分享给大家供大家参考,具体如下: 选项卡一: JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js标签页tab切换</title> <style> #div1 .active{ background:blue
-
用AngularJS的指令实现tabs切换效果
先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"
-
AngularJS实现使用路由切换视图的方法
本文实例讲述了AngularJS实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml
-
AngularJS入门教程之多视图切换用法示例
本文实例讲述了AngularJS多视图切换用法.分享给大家供大家参考,具体如下: 在AngularJS应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图的效果. 先来看看笔者写好的一个案例吧: 这两首词实际上是两个html碎片,分别写在page1.html和page2.html.下面是这两个文件的内容: <!--page1.html内容--> <div>
-
详解AngularJS ng-class样式切换
整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g
-
AngularJS实现动态切换样式的方法分析
本文实例讲述了AngularJS实现动态切换样式的方法.分享给大家供大家参考,具体如下: AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢. 本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点) Ok.,实现过程 1. html代码 <!--推荐或热点标题--> <div class="comTitStyle"> <div> <a ng-