最近一个同事在使用Angular的时候，希望能像VUE那样，修改代码后浏览器不刷新，页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下，发现在angular/cli创建的项目中，实现这个不算太难，步骤如下： 1、首先创建一个src/environments/environment.hmr.ts文件，内容如下export const environment = {production: false,hmr: true };当然，对应的environment.prod.ts和environment.ts需要增...
要实现的功能类似下图，动态添加或者删除div 点击 增加可添加一条div 点击删除可删除一条divHTML代码如下：（省略CSS样式代码了大笑） <div class="accordion-inner"><div class="alert alert-info fade in" ng-repeat="permission in permissions">授权给:<select id="" class="grantees" disabled="" style=" margin-bottom: 3px;" ng-model="permission.grantee"><option value="everyone">所有人</option><option value="authe...
需求：上面是一个table，运用了 <tr ng-repeat="rule in formData.ruleList track by $index">循环显示。现在的一个需求是：需要在每行添加一个字段，不过不能在同一行显示，需要在下一行显示。我首先想到了直接加个,不过没有办法换行。在下面再加个也不行。只能依赖强大的angulajs，自定义指令。下面我们就开始。 1 自定义指令 .directive(kbnTableRow,function($compile) {return {restrict : A,link : function(scope, element)...
实例如下所示： <!DOCTYPE html> <html ng-app="myApp"><head><meta charset="UTF-8"><title></title><style type="text/css">div{overflow: hidden;margin-top: 50px;margin-left: 500px;}.container{width: 250px;padding: 0;}.container li{list-style: none;border: 1px dotted gray;width: inherit;}</style></head><body><div ng-controller="myCtrl"><input type="text" ng-model="name" placeholder="请输入内容..." ng-ke...
废话少说，直接上代码：<div class="col-xs-3"><input type="radio" ng-value=1 ng-model="sss" name="aaa" >男</label><label><input type="radio" ng-value=0 ng-model="sss" name="aaa">女</label> </div> <div>{{sss}} </div>在ng中使用radio实现二选一的时候，需要注意几个地方： 第一：保持name的属性值要是一致的； 第二：保持ng-model对应同一个值； 第三：需要为每个radio设置ng-value，因为ng-model的对应的值就是选中的...
Angular 2.3 版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。组件继承涉及以下的内容：Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。Constructor：如果派生类未声明构造函数，它将使用基类的构造函数。这意味着在基类构造函数注入的所有服务，子组件都能访问到。Lifecycle...
本文实例讲述了Angular2.0实现modal对话框的方法。分享给大家供大家参考，具体如下： 觉得写的比较巧妙的就是样式的选取~记录下 CSS部分 .font {font-family: "Microsoft YaHei", Arial;font-size: 12px;color: #333333; } .ky-modal-content {min-width: 520px;min-height: 240px; } .ky-modal-header {/*height : 40px;*/padding: 0 10px 0 10px; } .ky-modal-title {font-size: 16px;font-weight: 100; } .ky-modal-body {min-h...
本文实例讲述了Angular实现的进度条功能。分享给大家供大家参考，具体如下： 项目里需要一个进度条，所以就在网上查找资料学习，看到了网友“雪狼”的代码分享，写的很高明，很精练，很厉害，原文中的代码如下： HTML部分： <div ng-class="{progress: true, progress-striped: vm.striped}"><div ng-class="[progress-bar, vm.style]" ng-style="{width: vm.value + %}"><div ng-if="vm.showLabel">{{vm.value}}%</div></div> </d...
本文实例讲述了AngularJS基于http请求实现下载php生成的excel文件功能。分享给大家供大家参考，具体如下： 使用PHPExcel插件的同学们都知道，导出excel是直接将生成内容修改content-type来将内容作为文件下载的，这时候需要页面上有一个url，通过点击来下载。 那么问题来了，如果在生成excel时有请求参数，只能通过js的http请求，这时候怎么下载呢？ 研究了一下，有以下几种方式： 1. angularjs创建a标签模拟下载 // 创建a标签模拟...
问题描述搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起Http请求等。 学过电子电路的同学应该知道按键防抖。原理是一样的：就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。 angular.js中解决方案把去抖函数写成一个service，方便多处调用： .factory(debounce, [$timeout,$q, function($timeout, $q) ...
闲来无事，写一个简单的angular的搜索框。 1.要求： 利用 AngularJS 框架实现手机产品搜索功能，题目要求： 1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上 2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分” 3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中 4）搜索条件具体要求： 搜索框（匹配操作系统、产品名、产商进行模糊查询） 价格区间（开始价格~结束价格） 2.需求...
本文介绍了AngularJS使用ui-route实现多层嵌套路由的示例，分享给大家，具体如下： 一、预期实现效果： https://liyuan-meng.github.io/uiRouter-app/index.html （项目地址：https://github.com/liyuan-meng/uiRouter-app） 二、分析题目要求，给出依赖关系，构建项目 1. service: （1）根据条件查询people数据checkPeople.service，不给出条件则查询所有。 （2）得到路由信息getStateParams.service。 2. components: （1）hell...
正如angular官网所说，项目国际化是一件具有挑战性，需要多方面的努力、持久的奉献和决心的任务。 本文将介绍angular项目的国际化方案，涉及静态文件(html)和ts文件文案的国际化。 背景 Angular: 5.0Angular Cli: 1.6.1(1.5.x也可以)NG-ZORRO: 0.6.8Angular i18ni18n模板翻译流程有四个阶段：在组件模板中标记需要翻译的静态文本信息(即打上i18n标签)。Angular的i18n工具将标记的信息提取到一个行业标准的翻译源文件(如.xlf文件,使...
本文实例讲述了AngularJS实现的锚点楼层跳转功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app="myApp"><head><meta charset="UTF-8"><title>anchor</title><style>#wei div{width:100%;height:720px;background: red;color:#fff;text-align:center;line-height: 720px;margin:20px;font-size: 80px;}#wei ul{position: fixed;top:300px;right:60px;}#wei ul li{width:20px;display:block;height:20px;backgro...
本文实例讲述了AngularJS实现的简单拖拽功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app="myApp"><head><meta charset="UTF-8"><title>www.gxlcms.com AngularJS拖拽</title><style>*{padding:0;margin:0;}.wei{width:100px;height:100px;background: red;position:absolute;cursor: pointer;/*left:0;top:0;*/}</style></head><body ng-controller="show"><div class="wei" wei-yi data="true"></div><div ...