我们会在本文中探索 Angular 2 内建的自定义验证。 # 介绍 Angular 2 原生就支持一些有用的验证器： required: 验证字段必须存在minlength: 验证字段值的最小长度有效maxlength: 验证字段值的最大长度有效pattern: 验证输入的值是否匹配给定的模板，比如 email我们会基于下面的接口创建一个表单来获取用户信息。 // user.interface.ts export interface User {username: string; // required, must be 5-8 charactersemail: string...
今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令。 因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下： var myCommon = angular.module("myCommon",[]); myCommon.directive("myStandTable", function () {return {restrict: "A",templateUrl: "app/template/tableTem.html",transclude: false,replace: true,controller: function (...
需求分析： 根据关键字搜索网页内容，并且高亮显示内容中的关键字 细节分析：1、每次执行搜索操作，需清空上一次结果2、需区分html标签和正常文本内容，否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路： 利用正则表达式匹配关键字 使用javascript字符串替换的方式，将关键字替换成<span class=red>关键字</span> 为了避免出现当关键字为 p 时候，将标签<p>替换成<<span>p</span>>……等等的情况 所有匹配和替换操作...
先上效果页面：其中几个知识点 1、angularJs提供了几个新的type类型： type="password"type="email"type="number"type="url" 2、几个参数含义 ng-required //是否必填，true/false ng-minlength //最小长度，数字 ng-maxlength //最大长度，数字 min //最小数字，数字，仅在type="number"下 max //最小数字，数字，仅在type="number" 3、几个form控制变量，先来一段代码 <form role="form"...
第一步，首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释， ng-if 值 布尔型，如果为true，则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可触发上拉事件的距离，默认为1% icon 加载时显示的加载图标，默认为 ion-loading-d 第二步：在控制器内书写 $scope.hasmore = true; 定义可触发事...
刚了解了下Angular.js，发现Angular.js绑定数据方面非常方便，套下教程demo: <div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h1>你输入了: {{name}}</h1> </div>我就想着，使用jq/js怎么实现类似的效果，后来找找，发现使用propertychange可以实现。 JQ： <div class="wrap"><textarea></textarea><div class="miss"></div></div>$(textarea).on(input propertychange, function() {$(.miss).html($(t...
一.背景对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！so，为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，但我们用的是Angularjs,更希望用双向绑定，指令的方式优雅地解决这个问题。 分析： 目标在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能。如果这个属性没起作用，也不影响原来的se...
相信不少同学模拟过腾讯的QQ做一个聊天应用，至少我是其中一个。 过程中我遇到的一个问题就是QQ输入框，自适应高度，最高高度为3row。 如果你也像我一样打算使用textarea，那么很抱歉，你一开始就错了。 textarea不是不可以的，然后我是这样错的。（就是监听scroll 如果出现了，就增加1rows 的高度）然而这样真的很挫textarea.bind(change,keydown){if(scrollTop > 0 ) {textarea.rows += 1} }正确的打开方式应该是利用 html5 全局...
AngularJS表单验证功能实现代码： ng-model的作用： 1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 2.双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改 3.数据校验 4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) 5.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类css内容： /*angularJS会根据表单的状态进行添加或者删除对应的样式*/ /*定义输入框不合法的默认背...
本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法。分享给大家供大家参考，具体如下： 接着前面那篇《AngularJS使用ng-app自动加载bootstrap框架问题分析》，现在我们看下如何使用带属性值的ng-app命令，让ng-app自动加载我们自定义的模块作为根模块。 <!DOCTYPE html> <html><head><script src="angular.js"></script><script>var rootMoudle = angular.module(rootMoudle, []);rootMoudle.controll...
通过AngularJS实现图片上传及缩略图展示示例，废话不多说了，具体如下： 从项目中截出的代码 HTML部分： <section><img src="image/user-tuijian/tuijian_banner.png" /><div><form ng-submit="submit_form()"><input type="text" name="aaa" placeholder="商品名称：" ng-model="form.goods_name" /><input type="text" name="bbb" placeholder="商品网址：" ng-model="form.goods_url" /><textarea placeholder="您宝贵的留言就是...
本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法。分享给大家供大家参考，具体如下： ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。如果想要实现自动加载，那么就不能让ng-app带有属性值。 <html><body ng-app><div>div1:{{1+3*2}}</div><script src="angular.js"></script></body> </html>1、不含ng-...
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable 需要在之前引入jquery，和jquery-ui，否则无法使用。 我们要做的事情，加载数据，拖拽排序并输出当前顺序： js代码： <script src="../../jquery.js"></script> <script src="../../jquery-ui.js"></script> <script src="../../angular.js"></script> <script src="ui-sortable...
网站不应该只注重功能，还应该注重用户体验；成熟的大型网站大都具备让用户自行选择主题及颜色的功能，AngularJS也可以做到这点。 效果图：原理是使用ng-href来动态为网页更换样式： <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css"> 代码： <!DOCTYPE html> <html ng-app="app" ng-controller="mainCtrl"> <head ><meta charset="UTF-8"><title></title>//动态更新CSS样式<link rel="stylesheet" type="te...
一、引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点，在这篇博文将介绍如何把AngularJs应用到实际项目中。本篇博文将使用AngularJS来打造一个简易的权限管理系统。下面不多说，直接进入主题。 二、整体架构设计介绍 首先看下整个项目的架构设计图：从上图可以看出整个项目的一个整体结构，接下来，我来详细介绍了项目的整体架构： 采用Asp.net Web API来实现REST 服务。这样的实现方式，已达到后端服务的公用、分别部署...