angularJS总结
angularJS的一些学习总结
Eighteen Z
此人不懒,但还是什么都没写。
展开
-
angular中的promise应用 —— $q
平常不怎么用promise,一是业务用不到,二是平常不用,看过了也就忘了,最近碰到这么三个异步操作,需要每一个都需要上一次返回。angularJS的回调是在q的服务里,通过q的服务里,通过q的服务里,通过q.defer(),它有3个方法1个属性resolve(value):根据value以解决派生的promise。相当于同意进行下一个函数。reject(reason):根据reaso...原创 2018-12-10 18:46:55 · 1271 阅读 · 0 评论 -
angular 的 uiRouter 的 方法$state.includes (判断当前激活路由)
angular 的 uiRouter 的 方法$state.includes (判断当前激活路由)作用:该方法用于判断当前激活的也就是地址栏的路由地址是哪个路由。比如 $state.includes(‘app’) 那么如果页面地址为“www.baidu.com#/app” 或者 “www.baidu.com#/app/xxx” 的时候,该方法的值会返回true。(一般我们定义的...原创 2018-11-22 14:27:39 · 1374 阅读 · 0 评论 -
angular 的http请求回调(success 和 error)
前面有文章写过angular的$http请求的简单书写和使用。回顾一下:var Server = angular.module("Server", []);Server.service("Api", ["$http", function ($http) { return { getTest : function (params, callback) {原创 2018-10-26 10:33:31 · 6327 阅读 · 4 评论 -
angular1 问题总结(持续更新)
1.ng-show,ng-hide,ng-if的区别和使用情景。 angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-if的表达式值为true的时候,元素会显示,为false的时候会隐藏,ng-hide相反。但是ng-show和ng-hide控制元素的显示或隐藏是通过改变CSS的display属性值来实现的。即,视...原创 2018-08-01 17:43:22 · 880 阅读 · 0 评论 -
angular常用过滤器---秒转时分秒
filter("seconds_to_hhmmss", function() { return function(seconds) { if (seconds || seconds === 0) { var seconds = Number(seconds); var hh = (seconds / 3600) >= 1...原创 2018-06-20 18:55:36 · 1364 阅读 · 0 评论 -
绑定控制器失效:多层body绑定。
angular在 ui-view 中嵌套页面时,绑定控制器失效angular中存在ui-view的视口,方便于我们利用视口以外公用的部分: 需要注意的问题: 1. 当我们嵌套路由页面绑定controller的时候千万注意不要有多层的body上绑定有controller。<body ng-controller="mainCtrl"> <div cl...原创 2018-06-11 15:42:05 · 189 阅读 · 0 评论 -
angular开发流程(搭建项目)
angular开发流程一,确定框架创建目录 目录分为 app,css,views,vendor,images以及index.htmlapp 中分为各模块文件夹和angular个自定义模块views 中分为各个单元页面的htmlvendor 中放各种插件包存放图片app:----- controllers: user: ...原创 2018-05-11 14:03:30 · 1028 阅读 · 0 评论 -
angular中ng-repeat的track by 的使用($index)
在angular中使用ng-repeat时数组中有重复元素当我们在循环的数组中存在有重复的元素时候,angular的ng-repeat就会报错,那是因为其不允许collection有相同的id(相同的元素会形成相同的id)出现。而基本的数据类型它的id就是它自身的值。我们要避免这种情况通常会使用track by $index 来让其生成自己不同的id,这样是最常用的直接通过索引来生成id。...原创 2018-05-08 10:52:40 · 14530 阅读 · 0 评论 -
angular ng-true-value和ng-false-value
angular中的checkboxangular中我们在使用checkbox的时候通常是两个状态 选中为true 取消选中为false当我们需要在选中和非选中的时候获取不一样的值的时候就需要ng-true-value和ng-false-value 了具体使用规则如下:<input type="checkbox" ng-model="open" ng-true-value...原创 2018-04-25 14:14:41 · 3516 阅读 · 2 评论 -
angular自定义指令--div横向滑动
直接上代码angular.module('directive', []).directive('scrollDiv', function() { return { restrict: 'EA', link: function(scope, element, attr) { var _this = $(element); ...原创 2018-04-20 16:27:04 · 1728 阅读 · 1 评论 -
监听$destroy来清除定时器
程序中我们常用到定时器来实现某些效果,比如倒计时等。但是我们使用定时器的同时,千万不要忘了当你不需要某个定时器的时候,一定要对其进行清除。否则不仅会拉低性能,而且会造成一些怪异的问题。通常情况就是闪动,数字或者某个节点的闪动。而通常我们在关闭某个功能点的时候,也会对定时器进行清除,但是有的时候会因为一些原因,某个$scope确实被销毁了,但是我们监听的情况中并没有包含这一点。这样就会造成定时器...原创 2018-04-16 10:23:00 · 1144 阅读 · 0 评论 -
Angular 双向数据绑定失效
当你的angular页面中引入了jq插件的时候,就可能会出现双向绑定失效的现象。表现为你的变量打印出来是已经更改过的数值,但是页面中的数值不改变。应该是 没有触发脏值检查,所以视图层不会更新。解决办法我们可以使用$scope.apply();方法如下:$scope.audio_volume = video.volume * 100; $scope....原创 2018-04-12 18:56:34 · 2250 阅读 · 0 评论 -
angular循环ng-repeat次数限制
&lt;tr ng-repeat="(x, y) in (program | limitTo : 100) track by $index"&lt;/tr&gt;(program | limitTo : 100) 是限制循环次数。可自己更改 track by $index是为了让数组重复元素照常循环。...原创 2018-04-10 15:27:32 · 2670 阅读 · 0 评论 -
angular中ng-repeat报错(数据中有重复)angularjs[ngRepeat:dupes]
ng-repeat在遍历的过程中会报错angularjs[ngRepeat:dupes] 原因是因为遍历的数据中有重复的数据当gop.pictTypeArr = [1,1,1,12,3,4]<tr ng-repeat="(x, y) in gop.pictTypeArr"> <td>{{x}}</td> <td>{{y}}&l...原创 2018-03-21 12:39:26 · 1151 阅读 · 0 评论 -
表单验证中input框的name属性和ng-modal属性的命名冲突
2.表单验证中input框的name属性和ng-modal属性的命名冲突。如下<input type="text" name="nodeName" class="form-control" ng-model="node.name" ng-maxlength="30" ng-disabled="node.status != 'disabled' &&原创 2018-03-21 12:36:02 · 866 阅读 · 0 评论 -
JS去除数组中的空字符串(空格也清除)
$scope.gop.pictTypeArr = $.grep($scope.gop.pictTypeArr, function (x) { return $.trim(x).length > 0; });在这里我是在angular中使用的。平时我们可以这样Arr = $.grep(Arr, function (x) { return $.trim(x).len...原创 2018-03-21 10:51:31 · 20289 阅读 · 1 评论 -
时间戳和日期格式相互转换
时间戳和日期格式相互转换日期转换时间戳 //var data = new Date(); var date = new Date("2018-03-14 11:11:11"); //时间对象 var str = date.getTime(); //转换成时间戳 str = str / 1000; 时间戳转换时间filter('timeToDat...原创 2018-03-16 12:44:00 · 8954 阅读 · 0 评论 -
angular中使用echarts (echarts 小入门)
angular + echarts 使用首先在你的index页面通过script标签把echarts引入到你的项目。(下载和引入方式不限官方包括了官网下载,github,npm下载npm install echarts --save,我这里用的最简单的script标签)。如下代码: <script type="text/javascript"src="vendor/echarts3....原创 2018-03-07 16:12:01 · 5987 阅读 · 5 评论 -
angular拦截器 登录信息验证
angular拦截器 登录信息验证.factory('MHttpInterceptor', ['$q', 'httpError', '$log', function($q, httpError, $log) { // register the interceptor as a service // @see: https://code.angularjs.or...原创 2018-02-28 18:01:23 · 1155 阅读 · 0 评论 -
angular $http 服务书写
get:search: function (params, callback) { $http({ url: bravoHttpApi.resource + '/vod/global_search' + params, method: 'GET' }).success(callback...原创 2018-02-28 17:58:39 · 212 阅读 · 0 评论 -
angular表单验证之表单嵌套
正常情况下我们的浏览器不支持两层的表单嵌套,所以,angular提供了ng-form来让我们达到这样的目的,主要用于部分表单提交,同时进行表单验证。from> ng-from> ng-from>form>这样就可以。 同时当我们使用input的number类型的时候,min和max属性限制之外的数值用js是获取不到的只能是undifined。 如input原创 2018-01-30 18:18:46 · 1120 阅读 · 1 评论 -
angular文字省略filter
angular文字省略filter.filter('text_length_set', function () { return function (str, length, tail) { if (!str) { return ''; } if (str.length原创 2018-01-16 16:57:23 · 645 阅读 · 0 评论 -
angular小bug之ng-show元素闪烁
今天遇到的当你的ng-show为一个表格,或者是内容较多的时候,里面还有ng-reapt 同时页面还有轮询。好吧,就这样的环境下,页面出现了闪动,我需要隐藏的ng-show每次都会先显示一瞬间然后隐藏。而使用ng-if则可以解决这个问题,原因我想可能就是,ng-show和ng-hide都是通过css属性来控制它的显示隐藏,可能会出现猪一样的闪动,而ng-if则通过创建和删除节点。不会出现这样的问题。原创 2018-01-02 17:19:12 · 2445 阅读 · 3 评论 -
Angularjs 中 ui-sref 和 $state.go 传递参数
1 ui-sref、$state.go 的区别ui-sref 一般使用在<a>...</a>;<a ui-sref="message-list">消息中心</a>$state.go('someState')一般使用在 controller里面;.controller('firstCtrl', function($scope, $state) { $state.go('login');原创 2017-12-29 16:20:34 · 413 阅读 · 0 评论 -
bootstrap中tab切换angular绑定失效
1.当使用bootstrap的nav nav-tab等tab切换的时候会对angular的双向数据绑定有一个隔绝的问题。//当你的数据是这样的$scope.test = 1;绑定在html上之后只会是单向的在页面展示,当你修改页面中的modal的时候,变量test并不会改变;解决:把 $scope.test 单层变量换为对象的属性就可以使用了。如$scope.obj =...原创 2017-12-16 15:59:49 · 635 阅读 · 0 评论 -
angularjs 小经验
1.模糊查询filter今天使用模糊查询filter来过滤一个下拉列表,如下<input type="text" ng-model="groupIn" class="form-control"><div ng-repeat="item in searchTemplates | filter:groupIn"></div>大家都知道这样的过滤器来做模糊查询特别方便,但是今天我多了一个需求,我需要原创 2017-12-21 18:01:00 · 162 阅读 · 0 评论 -
angular输入验证
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate><p>用户名:<br><input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$dirty && m原创 2017-12-01 17:34:07 · 763 阅读 · 0 评论