angularjs--Tab栏切换

最新推荐文章于 2023-09-01 16:34:23 发布

吃瓜群众欢乐多

最新推荐文章于 2023-09-01 16:34:23 发布

阅读量1.5k

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/sinat_36146776/article/details/68066046

版权

如图所示

选中后提交的实例代码：

<!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>