angularjs實現(xiàn)Tab欄切換效果

更新時間：2022年03月29日 16:24:07 作者：吃瓜群眾歡樂多

這篇文章主要為大家詳細介紹了angularjs實現(xiàn)Tab欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了angularjs實現(xiàn)Tab欄切換效果的具體代碼，供大家參考，具體內(nèi)容如下

如圖所示

選中后提交的實例代碼：

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: