前言 首先创建angularjs的基本项目就不说了，最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的，当然也可以通过自行下载angularjs的文件引入项目。 实例详解 main.js是项目的主要js文件，所有的js都写在这个文件中，初始化之后，该文件的js代码如下 angular.module(calculatorApp, [ngAnimate,ngCookies,ngResource,ngRoute,ngSanitize,ngTouch]).controller(MainCtrl, function ($scope) {$scope.result="";$scope.data=...
一、$watch简单使用 $watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality);每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如name,或函数如function(){return $scope.name} 。 listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用) objec...
先来看看效果图首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样： <A-deirective><B-directive></B-directive><C-directive></C-directive> </A-directive>下面这个tabs功能的指令，刚好用到了这个，可以让代码更加简洁。 <!DOCTYPE html> <html lang="en" ng-app="docsTabsExample"> <head><meta charset="UTF-8"><title></title><script></script><script src="lib/angular.min.js" type="...
前言一开始打算用原生的angularjs写，但是发现用原生angularjs，无论如何都不能获取里面图片的宽度和高度，因为angularjs内置的jquery方法里没有winth() 、height()方法。最好我还是引入了jquery，在同一scope上绑定了宽度高度。下面上源码，顺便我会把里面的一些注意的点说一下。 效果图首先说明下 1、首先使用了两个同级指令，并在两个同级指令间进行通信，同级指令间通信，非常简单，就是不要让同级的指令生成独立的scope，并且...
在刚开始没有给输入框添加焦点之前，没有任何效果。见下图：然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。 我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。 下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。 原...
先来看看效果图其实写一个轮播图还是蛮简单的，我想了两种种方法，来实现轮播图（实际上细分是5种，但是其中两种是操作dom原生，三种是利用AngularJs的动画，所有归为两大类），等我写出来，大家好好理解一下就好。 那我先写一种，第一种是不使用angularjs的动画模块，只使用指令来完成动画的切换。在这里面就是在指令里操作dom元素，超级easy。 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo"> <head><meta charset="U...
在实现Angularjs实现mvvm式的选项卡之前，先搬出我们常用的jquery实现。1、jquery实现简单粗暴的选项卡效果var nav = $(".tabs");//tab切换 var box = $(".box");//容器 nav.on("click", function(){ //点击事件var this_index=$(this).index();$(this).addClass("active").siblings().removeClass("active");box.eq(this_index).show().siblings().hide(); });在这里只给出js核心部分，html和css不做赘述。以上代码，简单粗暴的实...
AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生。在我上一篇文章当中，我讲到了在Angular应用中对CSS动画的支持。在这篇文章当中，我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果。在Angular当中，CSS和...
基于angularjs制作的幻灯片演示地址 npm方式安装 npm install angularjsSlider使用方法 第一步（引入） require(angularjsSlider)(moduleName);//引入第二步（参数配置）类型说明dataArray幻灯片图片数据 [{img: "1.jpg",link:#}...]timerNumber幻灯片切换间隔timer="2"btn-leftString左侧切换按钮btn-left="#btnleft"btn-rightString右侧切换按钮btn-right=".btnright"animate-typeString切换动画方式animate-type="ease"animate...
前言 Jquery发展至今,幻灯组件已经非常成熟，所以下面小编带大家一起看看利用Angularjs实现幻灯片效果的步骤。 npm方式安装 npm install angularjsSlider使用方法 第一步（引入） require(angularjsSlider)(moduleName);//引入第二步（参数配置） 类型说明dataArray 幻灯片图片数据 [{img: "1.jpg",link:#}...]timer Number幻灯片切换间隔timer="2"btn-left String左侧切换按钮btn-left="#btnleft"btn-rightString右侧切换按钮btn-...
本文用angularJS简单实现了一个小的按钮提示，按钮点击后会变色，注意html文件中需要引入jquery.js和angular.js 运行截图：当点击按钮的时候 按钮的样式改变：css代码： <style type="text/css">*{margin: 0px;padding: 0px;}.bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relative;}.bucSelected {border:1px solid rgb(195,195,195);color:#000;cursor: pointer;border-radius: 6px;backgrou...
照例先看效果下面是这个例子的代码： <!DOCTYPE html> <html lang="en" ng-app="scApp"> <head><meta charset="UTF-8"><title></title><script src="lib/angular.min.js" type="text/javascript"></script> </head> <body ng-controller="scController"><div><div ng-repeat="con in content"><input type="text" ng-model="con.num1" ng-change="changeNum1(con)"/><input type="text" ng-model="num2" value="con.num2"/><input ...
一、通过普通指令实现标签页 <link rel="stylesheet" href="views/show/tab.css"/> <div><ul class="nav nav-tabs" ng-init="vm.activeTab=1"><li ng-class="{active: vm.activeTab == 1}"><a href="javascript:;" ng-click="vm.activeTab = 1">标签1</a></li><li ng-class="{active: vm.activeTab == 2}"><a href="javascript:;" ng-click="vm.activeTab = 2">标签2</a></li></ul><div class="tab-content tab-bordered"><div cla...
效果图实例代码<!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0; list-style: none;font-size:12px;}.clearfix{overflow: hidden;display:block;clear:both}.clearfix:after{zoom:1}.relation{margin-top:7px;font:14px/38px "微软雅黑"; height: 38px; background: #f8f8f8; padding-left: 26px; color: #666;}.relation ...
最近在写一个简单的布局框架，其实功能大同小异。但目标要求是用尽量简单的代码，实现一些必用的功能。应用在一些要求加载速度快的场合。 CSS部分 .flex-row,.flex{ display: -webkit-flex;display: flex; flex-direction: row; } .flex-col{ display: -webkit-flex; display: flex; flex-direction: column; }Javascript部分 .directive(flex,[function(){ return { restrict:A, scope:{flex:=}, link:function(s,e,a){e.css(flex...