前言 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...
很多网站发帖的时候标签输入框看起来像是在 <input> 元素中直接显示标签. 比如这种一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <div> 时, 使 <input> 获得焦点. StackBlitz 上的 Demo 在 Angular 中的实现 将各个tag用 <span> 显示, 在同一行放一个 <inpu...
前言 在前端应用中，动画是一个常见的场景。在使用了一系列的动画库之后，终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里，需要两个动画，一个是购物车数量的增加动画，一个则是折叠页面元素的动画。 在实现的过程上，我采用了两种不同的 Angular 动画的方式： 使用 TypeScript 控制动画使用 @Component 中的 animationsAngular 动画基础 如 Angular 官网中...
本文给大家说一下Radio List的公共组件提取。 Radio List组件提取起来很方便，不想Checkbox那么复杂。 radio-list.component.ts import { Component, OnInit, Input, Output, EventEmitter } from @angular/core; import { RadioItem } from ../../model/radio; import { NgModel } from @angular/forms; @Component({selector: app-radio-list,templateUrl: ./radio-list.component.html,styleUrls: [./radio-list.component.css]...
新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文件中设置以下内容 {"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"ngTest": {"root": "","sourceRoot": "src","projectType": "application","prefix": "app","schematics": {"@schematics/angular:component": {"styleext": "less"}}......
angularJS在近几年发展火热，也无疑是目前市面上来说比较牛逼且成熟的框架，在单页面前端应用当中应该可以说是王者，双向绑定省去了大量的前端代码，控制器在其作用于方面的控制也是相当腻害，今天我们要说的是另外一个比较牛逼的功能，就是angularJS的指令directive，之前没听说过angularJS指令的朋友请自行度娘，随便搜一条文章都比我说的详细，这次用一个我自己写的图片上传的指令来做为案例，详细说明一下实际操作过程中的指令...
课程信息管理界面有这样一个需求，当课程类型为公选课的时候，可以选择课程性质，当为其他课程类型的时候，不必选择课程性质。 代码： /*** 获取课程类型下拉框数据*/getCourseTypeNameOptions(){let url = "teachingManagement-web/course/queryAllCourseType";this.http.get(url).subscribe(res =>{this.courseTypeNameOptions = res.json().data;//如果是公共选修，可以选择课程性质，如果不是，课程性质为空this.courseTyp...
废话不多说了，直接给大家贴代码，具体代码如下所示； <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.sspan{background: #28a54c;color: #fff;margin-left: 5px;}th,td{border: 1px solid #000;padding: 10px;}table{text-align: center;width: auto;border-collapse: collapse;}button{margin-top: 10px;margin-bottom: 10px;}</style> </head> <body ng-a...
废话不多说了，直接给大家贴代码了，具体代码如下所示：<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script type="text/javascript" src="angular-1.3.0.js"></script><script type="text/javascript" src="jquery.1.12.4.js"></script><script>var app=angular.module("myapp",[]);app.controller("myCtrl",function($scope){$scope.h=false;//显示和隐藏添加列表$scope.persons=[];//存放添加...
angularjs 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/an...
1.$timeout延时器 apptest.controller("main",function($scope,$timeout){$scope.pink="pink";$scope.box="第二个盒子";$timeout(function(){$scope.pink="第一个盒子内容，延迟两秒后改变了";},2000); setTimeout(function(){$scope.pink="第一个盒子内容，延迟3秒后改变了";$scope.$apply();//手动更新视图 },3000); }2.$interval计时器//计时器 var timer= $interval(function(){console.log(1);},1000); //清除计时器$interval...
这次我们来看一下angular的Sandboxing Angular Expressions。关于内置方法的，核心有两块：Lexer和Parser。其中大家对$parse可能更了解一点。好了不多废话，先看Lexer的内部结构： 1.Lexer //构造函数 var Lexer = function(options) {this.options = options; }; //原型 Lexer.prototype = {constructor: Lexer,lex: function(){},is: function(){},peek: function(){ /* 返回表达式的下一个位置的数据，如果没有则返回false */ ...
angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目，注册页的密码的input一般用password，但是用户输入密码时可能会输入错误，需要显示成text。 如图：首先，输入框的类型判断； <ion-input type="{{pwshow?text:password}}" placeholder="输入密码"></ion-input>然后，添加眼睛的点击事件，ngClass判断图标样式；<a href="javascript:;" rel="external nofollow" item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?ey...
先给大家展示下效果图，感兴趣的朋友参考下实现代码吧 效果图如下所示：具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > <script src="https://cdn.bootc...
今天在做任务的时候发现，需要在angularJS中知道什么时候页面加载完成，这样才能进行一些弹出操作，不然页面没有出来就弹出显得很突兀。 下面是解决办法： $scope.showAlert = function() { var alertPopup = $ionicPopup.alert({ title: Don\t eat that!, template: <h1>It might taste good</h1> }); }; $scope.$watch($viewContentLoaded, function() { $scope.showAlert(); }); 运行效果：能够隐约的看到了后面的页面了，说明先...