Angular实践第一弹:选项卡
Angular实践第一弹:选项卡
thecatshidog 发表于1年前
Angular实践第一弹:选项卡
  • 发表于 1年前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 使用angular实现选项卡的开发

在学习angular的过程中,实践是最好的方法。 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设置ID,获取元素。这就是jquery的思想。 angular的思想是一切以数据为中心,在controller中只操作数据,不去处理其他的问题。只改变数据的逻辑,不对界面进行操作。不设置class,不操作DOM,不做与界面元素有关的事情。做好分层设计,在每层做每层该干的事情。


##选项卡代码: ###css部分代码(随便写的,需要的自己写)

*{ margin:0;padding:0;}
#btn_group{list-style:none; margin:0 auto; width:850px;}
#btn_group li{ width:200px; height:40px; line-height:40px; border:1px solid black; float:left; margin:5px; text-align:center;}	 
#content{ width:800px; height:800px;  border:1px solid black; overflow:hidden; clear:both; margin:0 auto; position:relative;}
#content div{ position:absolute; top:0; left:0;}
.btn_in{ background:blue;}
.selected {background-color: lightgreen;}
.hide{display:none;}
.show{display:block;}

###html结构: ng-repeat的li是可以作为代替this来传递的,它引用的是你本身的原始数据,所以在ng-class中也可以做判断,li是否等于你选择的tab。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>angularjs 选项卡</title>
		<script type="text/javascript" src="angular.js"></script>
	</head>
 <body ng-app="myApp" ng-controller="myCtr">
   <ul  id="btn_group">
    <li ng-repeat="li in lis" ng-click="show($index,li.links)" ng-class="{selected: $index==selected}">		
    	{{li.name}}
    </li>
   </ul>
   	<div id="content" >
   	    <div ng-repeat="div in divs" class="hide" ng-class="{show:$index==selected}">{{div.html}}</div>
   	</div>
 </body>
</html>

###js关键代码: 这里以selected作为页面和tab之间的联系枢纽,形成映射关系。通过ng-repeat的$index和ng-class的key-value值方法来做一个判断。

var app=angular.module('myApp',[]);
app.controller('myCtr',function($scope){
   //$scope.res={link:'no.html'};
   //这里的link是为了你在页面引入模板而写的,这里没有引入模板,是假数据divs
   $scope.selected=0;
   $scope.lis=[{name:'按钮一',links:'no.html'},{name:'按钮二',links:'or.html'},{name:'按钮三',links:'and.html'},{name:'按钮四',links:'xor.html'}];
   $scope.divs=[{html:'我是页面一'},{html:'我是页面二'},{html:"我是页面三"},{html:"我是页面四"}];
   $scope.show=function(row,str){
     $scope.selected=row;
    //$scope.res.link=str;
   }
});
```
共有 人打赏支持
粉丝 0
博文 1
码字总数 546
×
thecatshidog
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: