Angularjs实现选项卡栏切换效果的代码是什么
导读：这篇文章给大家分享的是“Angularjs实现选项卡栏切换效果的代码是什么”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“Angularjs实现选项卡栏切换效果的代码是什么”吧。...
这篇文章给大家分享的是“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实现选项卡栏切换效果的代码是什么内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Angularjs实现选项卡栏切换效果的代码是什么
本文地址： https://pptw.com/jishu/654363.html