Angular
angular
吃瓜群众欢乐多
菜鸟烦恼多
展开
-
AngularJS中的http请求默认为异步的,请问如何设置为同步请求呢?--使用$q
在工作时遇到这样一个问题,在保存数据时,需要对保存的数据进行多次校验(与后台交互的校验),如果校验成功则执行保存操作,如果不成功则返回提示。话不多说,直接上代码var checkFun1 = function () { return $q(function (resolve,reject) { $http.post('product/checkSellingPr...原创 2018-02-07 14:22:39 · 5422 阅读 · 0 评论 -
angularjs三级省市联动
city.json中存放省市联动数据结构:controller中的使用controller中使用html关键代码<div> <label>所在区域:</label> <select name="province" ng-model="address.province" ng-opti...原创 2017-02-22 18:13:44 · 2430 阅读 · 0 评论 -
已选择过的酒品品种,第二次选择时,会提示选择重复---改进
先前的有一点bug,如此写后更简单js代码 //已选择的品种,不能再次选择 var selectList =[]; $scope.selectGoods=function(item,index){ if(selectList.length>0){ var flag=0; for(var i=0;i<sel...原创 2017-02-22 17:55:22 · 254 阅读 · 0 评论 -
angularjs上传图片时预览-点击图片放大
承接上一篇文章/*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//enlargePic指令名称,写在需要用到的地方img中即可实现放大图片 return{ restrict: "AE", link: function(sc...原创 2017-02-21 18:03:22 · 6188 阅读 · 8 评论 -
已选择过的酒品品种,第二次选择时,会提示选择重复
如图:JS代码如下//已选择的品种,不能再次选择 function first(args){ for(var i=0;i<args.length;i++){ if(selectList2.indexOf(args[i])<0){ selectList2.push(args[i]); } } return sel...原创 2017-02-21 17:39:17 · 345 阅读 · 0 评论 -
angularjs上传多张图片并预览
directive.js/* * 多图片上传及预览指令(需指定图片类名) * */angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) { return { restrict:'A', ...原创 2017-02-21 17:58:18 · 2882 阅读 · 0 评论 -
angularjs点击图片放大显示,点击关闭缩小显示
HTML代码<ul class="clearfix"> <li> <h3>身份证正面照片</h3> <div> <img ng-click="changePic($event)" ng-src="showImg/{{personInfos.dealer.idCardFace}}"...原创 2017-02-16 23:08:35 · 7483 阅读 · 5 评论 -
angularjs弹出框方法二
使用时,首先引入这三个必要的文件<script src="../angular.js"></script><script src="../ui-bootstrap-tpls-0.12.1.js"></script><link href="../bootstrap.min.css" rel="stylesheet">注意,在主模块...原创 2017-02-13 22:41:42 · 2429 阅读 · 0 评论 -
AngularJS ng-repeat下使用ng-model
http://zhaoyanblog.com/archives/97.htmlblue:<input type="radio" value="1" ng-model="selectValue"/> red:<input type="radio" value="2" ng-model="selectValue"/> yellow: <inpu...转载 2017-01-16 17:30:05 · 288 阅读 · 0 评论 -
在angularjs可实现页面跳转的各种方式
//法一、$location.path("/index/clientTakeGoods/clientTakeGoodsResult");(不支持火狐)//法二、$state.go('index.clientTakeGoods.clientTakeGoodsResult');(不支持谷歌)//法三、var url=$state.href('index.clientTakeGoods.cl...原创 2017-02-10 13:52:48 · 18597 阅读 · 0 评论 -
angularjs弹出框方法一
触发事件:用id控制<button class="btn-cancel" data-toggle="modal" data-target="#myModal">取消申请</button><!-- 模态框(Modal) --><div class="modal fade" id="myModal" tabindex="-1" role="di...原创 2017-02-13 22:29:49 · 13798 阅读 · 5 评论 -
angularJS-指令与控制器之间的交互--“鼠标经过事件”如图所示
////根据不同的控制器调用不同的方法<!DOCTYPE html><html ng-app='MyModule'> <head> <meta charset="utf-8"> </head> <body> <div ng-controller='...原创 2016-12-13 11:16:39 · 2416 阅读 · 0 评论 -
angularJS路由学习1
html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css" media="screen"> ul{margin-bottom: 100px;} ...原创 2016-12-12 21:38:58 · 251 阅读 · 0 评论 -
angularJs慕课网提问回答
1.为什么其它所有前端框架都不实现双向数据绑定?2.如果让你来实现双向数据绑定,你会怎么去实现?3.双向数据绑定机制有什么潜在的缺点吗?1, 需求不大2,订阅者模式3,太容易修改,无法跟踪数据层的变化...转载 2016-12-11 15:48:18 · 341 阅读 · 0 评论 -
angularjs分页查询
分页查询//首页导入<script type="text/javascript" src="framework/tm.pagination.js"></script>//routerApp中注入'tm.pagination'//html页面上<tm-pagination conf="paginationConf"></tm-paginati...原创 2017-02-24 11:15:50 · 1978 阅读 · 1 评论 -
angularjs中的$watch
//监听提货数量;计算利息 $scope.$watch('showLists', function(newValue, oldValue) { angular.forEach(newValue, function(item, key) { if (item.pickupQuantity > item.remai...原创 2017-02-28 20:29:13 · 277 阅读 · 0 评论 -
angualrjs--resolve使用
data3数据当加载页面的时候,数据已经在controller,不需要重新获取,大大减少了页面加载时间。这儿的数据是相当于全局数据,旗下皆可使用...原创 2017-03-02 12:16:24 · 257 阅读 · 0 评论 -
基于angular上传图片并能对图片裁剪,放大缩小,压缩size及在图片上添加文字等编辑操作,并能手动限制上传图片数量
最近公司业务需要客户在进行上传图片时,不满足要求的图片必须进行编辑后才能上传,满足条件的直接可以上传。于是花了不少时间来研究这个,想必学习angualrjs的人都知道,angualr不直接对dom进行操作,而网上的各种案例教程基本上都是用的document.getElementById("img")等基于dom进行图片的操作。若要解决这个问题,必须跳出这个固定思维——抽空将我实现的原理进行...原创 2018-02-02 15:27:13 · 3450 阅读 · 4 评论 -
angularJS控制input输入框值的的大小
ng-app = "MetronicApp"用法:控制输入在-999到999<input type="number" name="wineScore" number-max="999" number-min="-999" ng-model="vo.number">/** * 控制输入最大值 */MetronicApp.directive('numbe...原创 2018-01-17 11:19:56 · 1703 阅读 · 0 评论 -
AngularJS结合dateTimePicker的使用-指令
首先引入dateTimePicker相关的js与css文件,然后将此js文件在首页导入,然后在app.js中注入模块dateTimePicker名称,然后在页面上参考例子使用datetimepicker详细用法可参考此链接:这样做后,在使用的每个页面上就不用写冗余的js代码队datatimepicker进行设置了,并且,datatimepicker完全可以替代datapicker使用...原创 2017-08-24 16:49:02 · 7215 阅读 · 1 评论 -
AngularJS-layDate1.0.js 指令
网上参考后加以改进的版本/*时间选择*//*** 使用示例* <input def-laydate type="text" id="id1" ng-model="startTime"/>*/(function () { 'use strict'; var layDateDirective = angular.module("layDateModule",[...原创 2017-08-24 16:45:49 · 384 阅读 · 0 评论 -
$stateParams传值遇到的问题
今天在传值时遇到一个问题href="#/warehouseStock_detail/{{part.id}}/{{part.productName}}/{{part.productInfoSpecName.replace('/','')}}/{{part.cityName}}/{{item.ownerName}}"像这种之类的productInfoSpecName的 productInf...原创 2017-07-26 16:41:23 · 1182 阅读 · 0 评论 -
AngularJS监听数据变化范围-当输入框值改变时,计算新值与初始值的差
<!DOCTYPE html><html lang="en" ng-app="string"> <head> <meta charset="utf-8"> </head> <body ng-controller="myController"> <input t...原创 2017-07-03 18:02:27 · 3777 阅读 · 0 评论 -
AngularJS复制的几种方法
$scope.orderLists=[ {'number':123}, {'number':456} ]方法一、$scope.b=$scope.orderLists;console.log($scope.orderLists==$scope.b)//true方法二、$scope.newOrderLists = []....原创 2017-07-03 17:58:43 · 1451 阅读 · 0 评论 -
AngularJS-service城市去重
/** * 城市去重 * */MetronicApp.service('CollectionUtils', ['$cacheFactory', '$location', function ($cacheFactory, $location) { this.removeDuplicate = function (dataList) { var flagLi...原创 2017-06-23 10:03:39 · 403 阅读 · 0 评论 -
AngularJS结合layDate5.0.2.js的使用-指令
layDate网站的链接如图所示/*时间选择*//*** 使用示例* 时间范围:<input type="text" id="beginTime" laydate-select ng-model="vo.rangeDate" show-range="show">* 单个时间<input type="text" id="single" laydate-s...原创 2017-08-24 16:30:42 · 313 阅读 · 0 评论 -
注册登录页面的获取验证码倒计时
html<div class="get-vertify" ng-click="getVertify()" ng-if="visible">获取验证码</div><div class="get-vertify invalid-vertify" ng-if="invisible">{{leftTime}}秒后失效</div>angula...原创 2017-06-29 09:06:30 · 784 阅读 · 0 评论 -
dropDownSelect枚举下拉框
此搜索目录,下拉框太多,每个下拉框都要写类似html代码还要在controller.js中分别定义遍历对象的值简化:封装指令vo:对应着ng-model,type-code是数据字典中的值,根据type-code获得不同的下拉框的值 ,label-name:是标题,lab-col="3" sel-col="9" 分别是标题和下拉框的样式宽度“@”...原创 2017-04-10 17:08:25 · 2058 阅读 · 0 评论 -
angualrjs实现分页查询
首页引入<script type="text/javascript" src="framework/tm.pagination.js"></script>根目录注入:var routerApp=angular.module('routerApp',['ui.router','ngAnimate','tm.pagination','ui.bootstrap']);...原创 2017-03-17 17:54:07 · 1073 阅读 · 0 评论 -
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
链接:http://blog.csdn.net/soaring_tiger/article/details/439544011、什么是 InfiniteScroll?无限滚动(Infinite Scroll)也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中,用来在滚动网页到页面底部的时候自动加载下一页的内容。这种形式最早由推特(twitter)使用,后来...转载 2017-03-03 17:22:08 · 665 阅读 · 0 评论 -
angular过滤下拉列表,与select2效果类似
一、angular下拉框-ui-select我曾经写的一个指令,效果如图 <ui-select ng-model="cityObj.city" theme="selectize" ng-change="changeCityFunction()" name="cityFullName" ng-disabled="isDisabled"> <ui-sele...原创 2018-04-24 21:17:01 · 2308 阅读 · 0 评论