标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。主要练习自定义指令，向指令中传递参数，老规矩先上效果图：{{item.text}} 上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。指令基本API如下：app.directive('myDirective',function(){ return { //restrict: 默认为A（属性，默...
如上图所示，我们需要实现如下这些验证功能： 控件都是必输控件 都需要控制最大长度 第一次打开页面，控件不能显示为错误状态 输入内容再清空后，必输控件需要显示为错误状态 只有所有输入合法后，发布按钮才能变为可用状态 通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码： HTML。DemoJS代码（真的只有一行哟） ContractCreateController.jsvar ftitAppModule = angu...
在Angular当中，CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先，我们需要加载ngAnimate模块到我们应用的root模块当中。angular.module('coursesApp', ['ngAnimate']);而所有将被处理的JavaScript动画事件依然保持不变。以下是一个直接支持的动画列表和它们对应的不同行为： 指令事件集 ng-viewng-includeng-switchng-if enterleaveng-repeat enterleavemoveng-showng-hideng-class ...
本文示例代码下载：modulePattern.zip - 所有的 4 个 HTML 文件 以及 panacea.js - 1.6 KB 介绍AngularJS 的库里面有很多东西，但本文中我只想专注于小的，针对特定主题的库，我相信通过它们能对Angular有一个较好的介绍. 理解这篇文章并不需要你有任何Angular相关的，甚至是JavaScript的经验。希望你能从本文中看到一些使用Angular的好处，并乐于动手尝试. 背景 我使用Angular有一段时间了，而在学习Angular的时候，我也喜欢构建...
AngularJS 通过路由支持多视图应用， 可以根据路由动态加载所需的视图， 在 AngularJS 的文档中有详细的介绍， 网上也有不少教程， 就不用介绍了！ 随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性加载，使用起来非常不便， 因此按需加载模块的需求会越来越强，不过，AngularJS 并没有实现按需加载。 习惯了 seajs 的异步加载方式，也想着 angular 也能同样使用异步加载，但是事实不随人愿。 angu...
由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如file进行访问。 在angularJs中为了避免安全漏洞，一些ng-src或者ng-include都会进行安全校验，因此常常会遇到 一个iframe中的ng-src无法使用。 什么是SCE SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问。 由于angular默认是开启SCE的，因此也就...
下拉列表的简单使用ng-option指令使用很简单，只需要绑定两个属性：一个是ng-model用于获取选定的值；另一个是ng-options用于确定下拉列表的元素数组。上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下：$scope.engineer = { name: "Dani", currentActivity: "Fixing bugs" }; $scope.activities = [ "Writing code", "Testing code", "Fixing bugs", ...
本来在看vue.js没多久，最近在赶一个项目用回了angular2，还是先把ng2搞定吧，毕竟还不怎么懂。这两天我做的是用户表单数据的提交，大部分很简单，双向绑定就完事了，主要还是沟通的问题哈哈哈哈，虽然沟通的时候有点暴躁想甩锅，不过出了门还是高高兴兴吃饭高高兴兴回去。好了切入问题。这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能，要求图片1--9张。下面来记录下如何实现微信的图片预览/删除功能。 样式...
前言 ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件，而cordova插件的更新或者移动平台的更新很可能导致插件的不可用，维护升级成本较高。安装插件 安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker安装插件File Transfer $ ionic cordova plugin add cordova-plugin-fil...
前言本文基于 angular v7.2.7，初次编写于2019-4-17。 虽然代码是基于angular 7.2.7，但是语法是基于 angular 4.X 以上均可使用 。在项目开发过程中，我们经常需要跟后端进行文件交互，常见的诸如 图片上传，excel 导入与导出等。这里我们只讨论关于excel 的导入与导出。 Excel 导入excel 导入在angular 中其实非常简单，只需要安装 xlsx插件 就可以了。 安装 xlsx 插件npm install xlsx --save在component 中导入import * as XLSX...
需求：方案一 最开始就是用最简单的方法，前台请求数据，然后通过select和option在页面上显示，但是写了一会儿发现出现了许多类似下面的重复的代码： // 初始化年级选项 initGradeOptions() {this.gradeService.getAll().subscribe((res) => {this.gradeOptions = res;}, () => {console.log(get gradeOption error);}); } <nz-select nzPlaceHolder="请选择所属年级" formControlName="grade"><nz-option *ngFor="let grade of gr...
需求描述要求批量导出数据，以excel的格式。 选择方式前台 + 后台 之前在别的项目中也遇到过导出的问题，解决方式是直接在前台导出将表格导出。 这次没有选择前台导出的方式，是由于需要导出所有的数据，所以考虑直接在后台获取所有的数据，然后就直接导出，最后前台触发导出API。 后台实现导出使用的是POI，在上一篇文章中，我已做了基本的介绍，这里就不做介绍配置了，参照：POI实现将导入Excel文件 创建表格首先先建立一张表，这...
前言我们在开发过程中经常会遇到在页面上实现全局搜索的需求，例如：表格搜索，通过关键词检索整个表格，过滤出我们需要的数据。在Angular6 中我们可以通过Filter + Pipe 的方式来实现这个功能。下面我们看一下实现代码。 经人提醒，代码排版太乱。后续考虑将一个完整版的demo放到GitHub上，敬请期待。 实现代码第一步新建一个名为 filter.pipe.ts 的文件，这部分是实现的核心代码： import { Pipe, PipeTransform } from @angular...
很多网站发帖的时候标签输入框看起来像是在 <input> 元素中直接显示标签. 比如这种一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <div> 时, 使 <input> 获得焦点. StackBlitz 上的 Demo 在 Angular 中的实现 将各个tag用 <span> 显示, 在同一行放一个 <inpu...
使用AngularJS上传文件 前台是Angular页面后台使用SpringBoot/SpirngMVC上传文件html<div><input id="fileUpload" type="file" /><button ng-click="uploadFile()">上传</button> </div> js $scope.upload = function(){var form = new FormData();var file = document.getElementById("fileUpload").files[0];form.append(file, file);$http({method: POST,url: /upload,data: form,headers: {Content-Type: undefined},transform...