angularjs怎么实现Tab栏切换效果
angularjs怎么实现Tab栏切换效果
这篇文章主要讲解了“angularjs怎么实现Tab栏切换效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“angularjs怎么实现Tab栏切换效果”吧！
如图所示
选中后提交的实例代码：
<!DOCTYPEhtml><htmllang="en"ng-app="myApp"><head><metacharset="utf-8"><scripttype="text/javascript"src="asserts/angular.js"></script><styletype="text/css">.div-img{float:left;margin:5px;}img{width:200px;height:200px;border:2pxsolidpink;}.kongxin{margin:0auto;background-color:#ddd;width:20px;height:20px;border-radius:10px;}.shixin{margin:0auto;background-color:red;width:20px;height:20px;border-radius:10px;}.pic-title{text-align:center;}</style></head><bodyng-controller="myController"><divclass="div-img"ng-repeat="picIteminpicLists"><divclass="pic-title"ng-bind="picItem.title"></div><imgng-src="{{picItem.url}}"alt="显示图片"ng-click="checkItems(picItem)"><divclass="kongxin"ng-if="picItem.selected"></div><divclass="shixin"ng-if="picItem.checked"></div></div><div><inputtype="submit"value="点此提交"ng-click="choosePic()"></div><divng-bind="url"></div></body><scripttype="text/javascript">varmyApp=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栏切换效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
