温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

angularjs怎么实现Tab栏切换效果

发布时间:2022-03-29 17:47:51 来源:亿速云 阅读:280 作者:iii 栏目:开发技术

这篇文章主要讲解了“angularjs怎么实现Tab栏切换效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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怎么实现Tab栏切换效果”的内容了,经过本文的学习后,相信大家对angularjs怎么实现Tab栏切换效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI