angular实践第一弹：选项卡开发

时间：2023-03-08 22:54:02
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;

   }

});

相关文章