select标签的对于大家来说很熟悉了，下面我来讲讲AngularJS中 对select的属性设置，做出选择某个下拉选项后控制其他标签的隐藏； <select style="height:31px; width:100px" id="rewardMethod"name="rewardMethod" class="status_select" ng-model="state"> <option value="0" ng-selected=rewardMethod == "0">自动发放</option> <option value="1" ng-selected=rewardMethod == "1">指定中奖人</option> <option value="2" ng-se...
Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候，当程序运行到某一个部分，往Session中设置一个1到100的值。然后前台再每隔很小的一段时间去请求这个值。在AngularJS中，$http对象有3种状态，分别是success,progress,error，其中progress方法就会在success方法调用之前（也就是上传完成之前），不断地调用。而我们要做的就是在progress中在添加一个请求，去后台拿我们设置在session中的值。代码，...
AngularJS是一个javascript框架，通过AngularJS这个类库可以实现目前比较流行的单页面应用，AngularJS还具有双向数据绑定的特点，更加适应页面动态内容。 所谓单页面应用就是在同一个页面动态加载不同的内容，而这里的“跳转”可以理解为是局部页面的跳转。 AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置，下面是一个简单应用AngularJS路由来实现页面“跳转”的实例： 使用app.config来定义不同的location地...
最近在使用AngularJS，发现AngularJS菜鸟教程上的东西太过于基础，很多东西都没有提及，比如今天的一个关于前端的优化问题，懒加载。通过路由实现地址分发的时候，再通过懒加载模式加载你所需的文件，比如是相关的controller，就是js，这样有利于提高首次加载的负担。 下面就是一个懒加载的实现过程。 实现的过程主要是引用3个主要的JS文件： <script src="angular/1.4.8/angular/angular.min.js"></script> <script src="angular/...
本文实例为大家分享了AngularJS轮播图的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head><meta charset="UTF-8"><title>AngularJS carousel</title><link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> </head> <body><div ng-controller="CarouselDemoCtrl"><div style="height: 305px"><carousel interval="myInt...
引言 如果说组件系统(Component)是ng2应用的躯体，那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了。组件间通信的其中一种优等选择就是使用服务，在ng1里就有了广泛使用，而ng2保持了服务的全部特性，包括其全局单例与依赖注入。今天就来实践一下ng2的服务(Service)这一利器，来实现一个简单的音乐播放器，重点在于使用服务来进行音频的播放控制与全局范围的调用。 一、基本项目准备： 考虑到音频播放是个...
首先来看看效果效果 实现这样的效果，必须使用指令了，只有使用指令才能单独控制每一个scope。 示例代码如下： <div class="form-group"><label class="col-sm-2 control-label">请选择文章主题色彩</label><div class="col-sm-10" theme-group><label class="i-switch m-t-xs m-r"><input type="checkbox" input-theme ><i></i></label><label class="i-switch bg-info m-t-xs m-r"><input type="checkbox" input-theme><i></i></...
angularjs实现分页查询功能的实例代码，具体代码如下所示： //首页导入<script type="text/javascript" src="framework/tm.pagination.js"></script> //routerApp中注入tm.pagination //html页面上<tm-pagination conf="paginationConf"></tm-pagination> //controller.js代码 var reSearch = function() { var postData = { //发送给后台的请求数据 currentPage: $scope.paginationConf.currentPage, pageSize: $scope.pagina...
本文实例为大家分享了angularjs上传多张图片并预览的具体代码，供大家参考，具体内容如下 directive.js/* * 多图片上传及预览指令(需指定图片类名) * */ angular.module(routerModule).directive(fileModel, [$parse, fileReader, function($parse, fileReader) { return { restrict:A, link:function(scope, element, attrs, ngModel) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; var imgviewID = a...
本文实例为大家分享了angularjs点击图片放大预览的具体代码，供大家参考，具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module(routerModule).directive(enlargePic,function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称，写在需要用到的地方img中即可实现放大图片</span> return{ restrict: "AE", link: function(scope,elem){ elem.bind(click,function($event){ va...
在angularJs中增加了一个对全局的http请求统一做出处理的api--interceptors Interceptors 有两个处理时机，分别是： 其它程序代码执行 HTTP 请求之后，在实际从浏览器发出请求之前，即处理请求得到请求的响应之后，在交给其它程序代码处理之前，即处理请求的响应其引用场景包括 全局处理错误统一进行身份验证一类的处理对所有发出去的请求进行预处理对所有收到的响应进行预处理等等使用实例如下： commonService.config([$httpProv...
使用AngularJS实现一个简单的购物车，主要感受强大的双向绑定和只关注对象不关注界面特性。 先看看界面：点击+-操作和删除：这些全部只需要操作数据源就行，不需要关注界面。 实现过程： 一、使用任何语言创建一个服务端：public class ShoppingCar{public string Title { get; set; }public decimal UnitPrice { get; set; }public int Count { get; set; }} public ActionResult GetCar(){List<ShoppingCar> cars = new List<Sho...
前言 由于controllers之间不共享scope，如果希望在controllers之间传递参数，可能需要通过其他的方式实现，以下是当前我用到的两种在controllers之间传递参数的方法。注:参考文章Sharing Data Between Angular Controllers 一、service 可以写一个包含get/set的service,取参数/赋参数 .factory(paramService,function(){return {result:[],getResult:function(){return this.result;},setResult:function(res){this.result = res;}...
此插件使用angular.js、JQuery实现。（jQuery的引入需在angular 之前）用户可以 在输入框输入数据后验证 必填项、整数型、浮点型验证。如果在form 里面的输入框验证，可以点击 提交按钮后，实现 必填项验证。 效果图如下：(1)验证未通过时，背景标红等样式为 input.ng-invalid, select.ng-invalid {background-color: #ee82ee !important;border: 1px solid #CCC;}.qtip {position: absolute;max-width: 260px;display: none;m...
先上图：这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right，向左或向右的触摸事件。结合css3的transition实现的动画。ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>Angular2</title...