利用angularjs1.4制作的简易滑动门效果
更新时间：2017年02月28日 14:23:44 作者：歪脖酱
本文主要介绍了利用angularjs1.4制作的简易滑动门效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
效果图：(点击'python'效果)
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" rel="external nofollow" rel="stylesheet">
<title></title>
</head>
<body ng-app="app" ng-controller="magazine">
<div class="container" >
<div class="row" >
<div class="col-md-4 col-md-offset-4">
<ul>
<li class="pull-left" ng-click="toggle()"><a href="javascript:;" rel="external nofollow" rel="external nofollow" >jquery</a></li>
<li class="pull-left" ng-click="toggle2()"><a href="javascript:;" rel="external nofollow" rel="external nofollow" >python</a></li>
</ul>
</div>
<div class="col-md-6" ng-show="myvar">
<p>我就是我</p>
</div>
<div class="col-md-6" ng-show="myvar2">
<p>注意注意我变了</p>
</div>
</div>
</div>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
/**
* app Module
*
* Description
*/
angular.module('app', []).controller('magazine', ['$scope', function($scope){
$scope.myvar = true;
$scope.myvar2 = false;
$scope.toggle = function () {
$scope.myvar = true;
$scope.myvar2 = false;
}
$scope.toggle2 = function () {
$scope.myvar = false;
$scope.myvar2 = true;
}
}])
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本篇文章主要介绍了angular2系列之路由转场动画的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
本篇文章主要介绍了在 Angular 中实现搜索关键字高亮示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
本篇文章主要介绍了详解angular中的作用域及继承，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
这篇文章主要介绍了Angular4.x通过路由守卫进行路由重定向，实现根据条件跳转到相应的页面,这个功能在网上商城项目上经常会用到，下面小编给大家带来了解决方法一起看看吧2018-05-05
Angular5.0 子组件通过service传递值给父组件的方法
这篇文章主要介绍了Angular5.0 子组件通过service传递值给父组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了关于 angularJS的一些用法的相关资料,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了浅谈Angularjs中不同类型的双向数据绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
AngularJS中的$watch()，$digest()和$apply()区分
这篇文章主要介绍了AngularJS中的$watch()，$digest()和$apply()区分，感兴趣的朋友可以参考一下2016-04-04
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇：$watch,$apply,$digest它们是如何工作的呢？这里我想回答这些问题，其实它们在官方的文档里都已经回答了，但是我还是想把它们结合在一起来讲2015-10-10
详解Angular4中路由Router类的跳转navigate
这篇文章主要介绍了详解Angular4中路由Router类的跳转navigate，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论