![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
AngularJs
Web魔法师
Web魔法师
展开
-
AngularJs学习笔记——摘自菜鸟教程
Angular Js是一个Javascript框架,它是一个以Javascript编写的库。AngularJS 模块(Module) 定义了 AngularJS 应用。AngularJS 控制器(Controller) 用于控制 AngularJS 应用。ng-app指令定义了应用, ng-controller 定义了控制器。AngularJS 扩展了 HTML原创 2016-12-02 16:05:09 · 1607 阅读 · 0 评论 -
ng-hide控制Htm的DOM l元素的展示与隐藏
利用ng-hide来控制图片的隐藏和显示;当布尔值hasId 为假时,则展示div中的图片,hasId 为真时,则隐藏div中的图片。初始值$scope.hasId =false; 提到ng-hide,不可避免提到ng-if 和ng-show 这两个指令:ng-if 指令用于在表达式为 false 时移除 HTML 元素。如果 if 语原创 2017-03-27 12:49:30 · 479 阅读 · 0 评论 -
什么是响应式设计
响应式设计:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面决定,包括弹性网格和布局、图片、CSS媒体查询(media query)的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。换句话说,页面应该有能力自动响应用户的设备环境。响应式网页设计就是一个原创 2017-04-06 17:18:35 · 894 阅读 · 0 评论 -
表单控件大小
前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:1、input-sm:让控件比正常大小更小2、input-lg:让控件比正常大小更大这两个类适用于表单中的input,textarea和select控原创 2017-05-03 12:42:29 · 2091 阅读 · 0 评论 -
表单控件状态(禁用状态)
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理:/*源码请查看bootstrap.css文件第1723行~第1729行*/.form-control[disabled],..form-control[readonly],f原创 2017-05-03 12:43:26 · 2551 阅读 · 0 评论 -
angularjs中,获取默认选中的单选按钮的value
在Html页面中,有三个单选按钮,默认选中的是第二个“重要”这个选项,设置ng-checked="true",把该选项默认选中,可是在提交表单时,却提示$scope.level为undefine状态,明明默认选中了为什么却是undefine呢?于是,先测试了一把:在Html页面写下下面的代码: <input type="r原创 2017-05-06 16:49:43 · 7121 阅读 · 1 评论 -
AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果
在项目开发中,经常会用到鼠标移入显示,鼠标移出隐藏的效果,在angularjs中,主要使用了ng-mouseenter与 ng-mouseleave 这两个指令来实现鼠标的移入时显示,移出时隐藏的效果。示例如下: AngularJS Plunker document.write(""); Mouse over me. H原创 2017-05-16 13:48:42 · 9673 阅读 · 1 评论 -
Angularjs控制器之间的通信方式总结
1.向父作用域层次结构发出自定义事件:使用$emit()方法,scope.$emit(name,[args,...])注:name是事件名,args 是0个或多个参数2.向子作用域层次结构广播自定义事件:使用$broadcaset()方法,scope.$broadcaset(name,[args,...])注:name是事件名,args 是0个或多个参数.3.使用侦听器处理自定原创 2017-02-18 10:20:30 · 4419 阅读 · 0 评论 -
Js倒计时10秒系统自动提交
$(document).ready(function () { RunTimer = function (k) { $("#tit_time").text("请您确定提交,倒计时: " + k + "秒后将自动提交"); k--; if (k >= 0) { timer = setTimeout(function ()原创 2017-06-20 09:27:00 · 4287 阅读 · 0 评论 -
获取HTML元素4个方法
Js获取HTML元素4个方法通常由以下四种:document.getElementsByName()、document.getElementById()、document.getElementsByTagName()和 document.getElementsByClassName()。这四个方法的区别及用法如下:document.getElementsByName()原创 2017-06-10 15:39:41 · 1725 阅读 · 2 评论 -
Angularjs中单选按钮用法总结
单选按钮,比较常用,但是,使用时,总会出现一些问题,比如点击时,获得不了对应的值,或者单选按钮在页面加载时,不能默认显示所要选择的项等一系列问题。下面总结一下:Html页面: <input type="radio" name="myTestRadio" ng-model="vm.selection" ng-value="value" ng-check原创 2017-08-22 12:51:37 · 4236 阅读 · 0 评论 -
angularjs报错汇总—— angularjs Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.
在用angularjs开发中,前端页面通过ng-repeat指令循环显示某些值时,会出现 angularjs Error: [ngRepeat:dupes] ,这个错误让人有点困惑,明明可以正常循环的,为啥错误了呢?出现这个错误的原因是如果页面中使用了ng-repeat,angularjs默认是根据里面的内容判断是否相同的,如果里面出现相同的内容就会报错,这里要注意的是,比如如下的内容:原创 2017-12-29 14:50:02 · 2312 阅读 · 0 评论 -
Angularjs学习笔记——AngularJS中$filter过滤器使用(自定义过滤器)
1.内置过滤器:* $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期,转换大小写等等。* 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多,可以百度。关键是如何使用:* 1.在HTML中直接使用内置过滤器* 2.在js代码中使用内置过滤器* 3.自定义过滤器**原创 2017-12-29 15:10:48 · 2569 阅读 · 0 评论 -
AngularJS中ng-class的用法总结
一、什么是ng-classng-class是AngularJS预设的一个指令(directive),通过这个指令能够对html元素的类(class)进行动态地设置。二、在什么场景下用ng-class在需要动态修改html元素的时候...所以其实这个问题等价于什么时候需要动态修改html元素的类?在个人浅薄的编程经验中......需要动态修改html元素的类的时候基本是需原创 2018-01-05 16:15:23 · 8850 阅读 · 0 评论 -
angularjs读书笔记:angularjs内置过滤器总结——摘自《Angularjs权威教程》
过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器。在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如,假设我们希望将字符串转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器:{{ name | uppercase }}在JavaScript代码中可以通过$filter来原创 2018-01-05 16:17:49 · 343 阅读 · 0 评论 -
AngularJs: $watch 监听作用域变化
angjularjs中,有些事件不是浏览器触发的,是由模型中数据的改变触发的。通过这种功能,可以对模型(model)的改变做出响应,而无须在所有值可能变化的位置添加代码。该功能是非常有用的,因为模型中的数据通常可能会使用多种方式进行改变,用户输入、服务更新等。为了添加处理作用域值变化的功能,可以使用angjularjs中内置的$watch功能为作用域中的变量添加$watch。$scope有个$w...原创 2018-02-26 15:54:29 · 528 阅读 · 0 评论 -
如何在angular中把DOM加载完成后再调用指定函数
下面是个网页片段, <tbody ng-repeat="row in convertdisplayed|filter:filter |paging:page.index:page.size" on-finish-render="ngRepeatFinished"> <tr> ...原创 2018-03-13 16:57:42 · 8095 阅读 · 0 评论 -
angular: 前端TS把后台数据导出word格式
exportWordCase() { // 导出word if (!this.suiteId) { this.msg.error('请选择目录!'); return; } this.isSpinShow = true; let url = this.url + 'v1/testrom/export/word?suiteId='...原创 2018-11-19 16:50:13 · 1837 阅读 · 0 评论 -
css布局模型
清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。原创 2017-03-22 16:34:31 · 301 阅读 · 0 评论 -
AngularJs页面数据不加载的解决思路
在项目开发中,调试代码时,页面无数据加载,通常有以下思路:1.先刷新页面,如果刷新页面还是无数据,别忘了清空浏览器缓存,再刷新页面;2.清空浏览器缓存,页面还是无法加载数据,控制台也没报错,这时需要查看相关页面之间的关联关系,通过查看config.router.js来查看相关页面,查查这些页面之间是否有参数传递;查看参数传递是否正确,参数不正确,就得不到数据;注意:做前原创 2017-03-22 16:15:48 · 3474 阅读 · 0 评论 -
Angularjs 学习笔记总结之二
label class="setting-label">通过准则span style="color:red;font-size:18px">*span>label>在通过准则后面加星号,通常可用于注册等页面的必填项。table class="table table-simple table-striped"> thead> tr> th st-sort="d原创 2016-12-06 10:54:25 · 287 阅读 · 0 评论 -
标题超过60个字符,显示省略号,鼠标移动到标题上面,显示全部标题的实现方式
第一种实现方式:鼠标移动到标题上面,弹出悬浮窗,用函数来实现。 Task title function overShow(obj, e) { var showDiv = document.getElementById('showDiv'); var theEvent = e ? e原创 2017-01-13 15:35:30 · 1692 阅读 · 0 评论 -
Angular:在表达式中与作用域交互
新建expression_scope.html页面 AngularJs Expressions a{color:blue; text-decoration: underline;cursor:pointer} Directly accessing variables in the scope: {{sp原创 2017-01-14 10:52:24 · 302 阅读 · 0 评论 -
AngularJs作用域
作用域是绑定视图,业务逻辑和服务器端数据的胶水。应用启动时,根作用域也会随之创建。根作用域将存储应用级别的数据,可以使用$rootScope服务访问它。根作用域应该在模块的run()块中初始化,但是也可以在模块的组件中访问它。作用域与控制器之间的关系:控制器是通过增强作用域来提供业务逻辑的代码。可以使用应用的Model对象的controller()方法创建控制器。该函数将注册一个控原创 2017-01-14 12:31:13 · 245 阅读 · 0 评论 -
组件型指令
组件型指令的写法通常是这样的:// 声明一个指令angular.module('com.ngnice.app').directive('jobCategory', function () {return {// 可以用作HTML元素,也可以用作HTML属性restrict: 'EA',// 使用独立作用域scope: {configure: '='},/原创 2017-01-14 12:35:08 · 543 阅读 · 0 评论 -
三个div元素在同一行靠右排列
首先,定义一个大的div包括这三个div,这个大的div属性设置然后,把左边和中间的div设置为,把最右边的div设置成:经过上面设置,即可把三个div排列在同一行。源代码如下: 创建任务 创建版本任务 创建其他任务原创 2017-02-06 19:44:56 · 20942 阅读 · 2 评论 -
JavaScript创建对象--AngularJs开发秘籍笔记
JavaScript有几个内置对象,例如Number,Array,String,Date和Math。创建对象:var x = new Number("6")还可以通过使用{}语法创建对象,此时可以直接为对象属性和方法赋值。属性使用property:value语法定义。var obj = {name:"My object",value:7,getValue:functio原创 2017-01-11 18:50:23 · 1763 阅读 · 0 评论 -
AngularJs 刷新页面
AngularJs 刷新页面可采用下面的方式:首先先在控制器中注册$window,然后定义函数$scope.reloadRoute,在需要刷新页面的地方调用函数$scope.reloadRoute即可。$scope.reloadRoute = function () { $window.location.reload();};上面是我在项目开发中用到的刷新页面的常用方式,原创 2017-01-17 15:51:46 · 34166 阅读 · 5 评论 -
解决页面刷新或代码更新后无反应的方法
页面不能刷新,或者出现刷新没效果,清除缓存后也没效果,重新更新拉取代码也没反应,出现此问题,一般是多开了服务进程,比如通过Pycharm启动了两个服务进程,此时可以使用命令:netstat -ano|findstr 8000,查看有关8000端口的进程,然后再在任务管理器中关闭相应的进程就可以了。原创 2017-02-16 20:28:53 · 3637 阅读 · 0 评论 -
input默认选中内容,单击时清楚内容,失去焦点时恢复原来内容
为input添加鼠标属性,onmouseover="this.select()"当鼠标移入时,会默认选中input中的内容。当在input内单击时,会自动清除里面的内容,当input失去焦点时,又会自动恢复里面的内容:var inputtext= document.getElementById('input' + number); //获取input的idinputtext.value = it原创 2017-02-28 08:49:31 · 5361 阅读 · 0 评论 -
Uncaught ReferenceError: moresearch is not defined 错误
用AngularJs做单击按钮,弹出页面时,提示Uncaught ReferenceError: moresearch is not defined错误,我的代码是这样的: 更多搜索,单击“更多搜索”按钮,提示“Uncaught ReferenceError: moresearch is not defined错误”,我明明在控制器中定了了这个函数,可是,函数也没错误,可是就是单击按钮,报原创 2017-01-23 10:06:53 · 2702 阅读 · 0 评论 -
angularjs ui-select如何设置默认选中值
angularjs ui-select如何设置默认选中值,可以采用ng-model来设置,示例如下: ng-model="provinces.selected" theme="bootstrap" on-select="loadCitys($item, $model)"> <ui原创 2017-02-21 13:58:25 · 9520 阅读 · 0 评论 -
dropdown-menu 单击不消失实现方式
dropdown-menu一单击就会消失,不能实现输入等操作,需要为dropdown-menu进行控制,下面的stop方法实现了dropdown-menu单击不消失的效果,很方便。//调用stop()$scope.stop=function(){ event.stopPropagation();};调整菜单位置可以向.dropdown-menu原创 2017-01-23 13:23:53 · 5496 阅读 · 0 评论 -
button的dropdown-toggle的作用
dropdown-toggle 单击按钮,会产生下拉框的效果。原创 2017-01-23 13:26:29 · 6353 阅读 · 0 评论 -
Html Select 使用selected属性设置默认选择项
Html Select 如何进行默认选择,只要给某个option 添加 selected = selected"属性就是默认选项 全部 通过 未通过 则“通过”为默认选中。原创 2017-02-04 08:34:21 · 58803 阅读 · 1 评论 -
AngularJs模态框应用总结
var modalInstance = $modal.open({ templateUrl: '/static/js/controllers/dashboard/search.html', controller: 'searchCtrl', size: 'lg', resolve: {原创 2017-01-25 17:37:25 · 3810 阅读 · 0 评论 -
angular: 前端TS把后台数据导出Excel格式
downLoadTemplet() { // 下载excel模板 if (!this.suiteId) { this.msg.error('请选择目录!'); return; } this.isSpinShow = true; let url = this.url + 'v1/testrom/export/template'; ...原创 2018-11-19 16:51:37 · 2714 阅读 · 2 评论