本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下： 管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。 纯管道(Pure Pipe)与非纯管道(Impure Pipe) 管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下，管道都是纯的，在自定义管道声明时把pure标志置为false,就是非纯管道。如: @Pipe({name: sexReform,pure:false })纯管道和非纯管道的区别: ① 纯管道: Angu...
实例如下： <form name="signUpForm" novalidate><div class="form-group"><div class="row clearfix"><label for="tel1" class="col-xs-12" style="text-align: left">L张蒙号码1：</label><div style="text-align: center" class="col-xs-12"><input id="tel1" type="tel" name="tel1"data-ng-model="vm.tel1"ng-minlength="11"ng-pattern="/^1[3|5][0-9]\d{4,8}$/" requiredstyle="width: 80%;font-size: large"placeholder="请...
代码如下所示： <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate><p>电话:<br> <input type="text" name="phone" ng-model="phone" ng-pattern="/(^$)|^(((\+86)|(86))?1[34578]\d{9})$/"> <span style="color:red" ng-show="myForm.phone.$dirty && myForm.phone.$invalid">联系电话格式不正确！</span> </p><p> <input type="submit" ng-disabled="myForm.$invalid"> </p> </form>正则表达式： 1....
废话不多说，直接上代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>购物车</title><script src="angularjs/angular.js"></script><style>.box{width: 100%;border-bottom: 1px solid silver;}.box1{width: 100%;margin-top: 5px;}.box1 button{width: 100px;height: 40px;background: crimson;color: white;text-align: center;line-height: 40px;float: right;border: 0;border-radius: 13px;}tabl...
本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考，具体如下： 当scope选项写为scope:{ }这种形式的时候，就已经为指令生成了隔离作用域，指令的模板就无法访问外部作用域了： 具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。 现在，我们来看看绑定策略的三种形式： @、= 、&。 1. @ 本地作用域属性：使用@符号...
课程信息管理界面有这样一个需求，当课程类型为公选课的时候，可以选择课程性质，当为其他课程类型的时候，不必选择课程性质。 代码： /*** 获取课程类型下拉框数据*/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...
AngularJS 仿微信图片手势缩放的实例 前言：最近，公司做一个混合应用项目，涉及到一个图片缩放功能，类似微信那样支持touch事件。 亲测，实现方案很不错，所以放出来，和大家分享一下，希望有人能用得到。 核心思想就是用到了CSS3的transform属性， 不多说，我们看代码： use strict;/*** @ngInject*/ module.exports = function () {var _directive = {restrict : A,scope : false,link : _link};function _link(scope, eleme...
摘要 现在很多app采用内嵌h5的方式进行开发，有些数据会存在webveiw的cookie中，那么如果使用angularjs开发单页应用，就需要用到angularjs的cookie操作。这里提供一个简单的学习demo。方便快速上手。 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Scripts/angular.js"></scrip...
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 */ ...
Angular2 Http 1. 使用Http 绝大部分应用程序都会和后台服务打交道，Http是浏览器和服务器之间通讯的主要协议，通过Http调用来访问远程服务器上相应的 Web API。 HttpModule 并不是 Angular 的核心模块，通过Angular包中一个名叫 @angular/http 的独立附属模块发布了出来。我们的应用将会依赖于Angular的 http 服务，它本身又依赖于其它支持类服务。来自 @angular/http 库中的 HttpModule 保存着这些 HTTP 相关服务提供商的全集。...
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义，通常来讲，组件之间的交互方式主要有如下几种： l 使用输入型绑定，把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事件 l 父组件与子组件通过本地变量互动 l 父组件调用 View...