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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用AngularJS2中的指令实现按钮的切换效果

    使用AngularJS2中的指令实现按钮的切换效果

    之前在AngularJS2中一种button切换效果的实现(二)中实现了按钮的切换效果,但是方法比较low,这次我们使用Angular2的指令来实现. 指令实现hover效果 import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructo

  • 详解AngularJS ng-class样式切换

    详解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多视图切换用法.分享给大家供大家参考,具体如下: 在AngularJS应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图的效果. 先来看看笔者写好的一个案例吧: 这两首词实际上是两个html碎片,分别写在page1.html和page2.html.下面是这两个文件的内容: <!--page1.html内容--> <div>

  • 用AngularJS的指令实现tabs切换效果

    用AngularJS的指令实现tabs切换效果

    先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"

  • 使用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

  • AngularJS标签页tab选项卡切换功能经典实例详解

    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路由切换实现方法分析

    AngularJS路由切换实现方法分析

    本文实例讲述了AngularJS路由切换实现方法.分享给大家供大家参考,具体如下: 之前有在服务器端接触到angular路由切换,今天想在本地实现路由,捣鼓半天终于成功了,特把步骤整理分享下,免得大家走弯路! 1.首先引入angular.min.js和angular-route.min.js 2.然后我们来写框架index.html,index里面装的是所有页面都有的nav导航和footer页脚(我这个demo里只有nav),模板文件page1.html,page2.html,也就是中间路由切换

  • AngularJS实现动态切换样式的方法分析

    AngularJS实现动态切换样式的方法分析

    本文实例讲述了AngularJS实现动态切换样式的方法.分享给大家供大家参考,具体如下: AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢. 本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点) Ok.,实现过程 1. html代码 <!--推荐或热点标题--> <div class="comTitStyle"> <div> <a ng-

  • angularJs的ng-class切换class

    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实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml

随机推荐