Angularjs实现选项卡栏切换效果的代码是什么-群英

您现在的位置是：群英 > 开发技术 > web开发

Angularjs实现选项卡栏切换效果的代码是什么

Admin发表于 2022-05-26 17:09:45583 次浏览

上一篇：用JS实现一个简易的计算器的代码是什么

下一篇： es6中两个数组对象如何在js中匹配

这篇文章给大家分享的是“Angularjs实现选项卡栏切换效果的代码是什么”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“Angularjs实现选项卡栏切换效果的代码是什么”吧。

本文实例为大家分享了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实现选项卡栏切换效果的代码是什么”的文章就介绍到这了，感谢各位的阅读，更多相关Angularjs实现选项卡栏切换效果的代码是什么内容，欢迎关注群英网络资讯频道，小编将为大家输出更多高质量的实用文章！

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

标签： angularjs,Tab,切换

上一篇：用JS实现一个简易的计算器的代码是什么

下一篇： es6中两个数组对象如何在js中匹配