AngularJS中巧用ngModel的$asyncValidators属性写一个验证唯一性的Direcitve

 

有这样的一个需求:添加用户的时候,根据主键判断当前添加用户的email是否已经被使用。

为此,我们需要把主键和email来传递给远程的一个API,让API返回结果,告之当前email是否被使用过。

写一个验证email唯一性的Directive,页面大致如下表现:

 

<input type="text" name="email" class="form-control"data-ng-model="vm.customer.email"data-ng-model-options="{updateOn: 'blur', allowInvalid: true}"data-my-uniquedata-my-unique-key="{{vm.customer.id}}"data-my-unique-property="email"data-ng-minlength="3"required /><span class="errorMessage" ng-show="editForm.email.$touched && editForm.email.$error.unique">Email already in use
</span>    

 

以上,data-my-unique-key用来接收主键,data-my-unique-property用来接受email这个值。


Directive部分大致如下:

 

(function(){var injectParams = ['$q', 'dataService'];var myUniqueDirective = function($q, dataService){var link = function(scope, element, attrs, ngModel){ngModel.$asyncValidators.unique = function(modelValue, viewValue){var deferred = $q.defer(),currentValue = modelValue || viewValue,//获取主键key = attrs.myUniqueKey,//my-unqiue-key = "{{customer.id}}"//获取emailproperty=attrs.myUnqiueProperty; //my-unique-property="email"if(key && property){dataService.checkUniqueValue(key, property, currentValue).then(function(unique){if(unique){deferred.resolve();} else {deferred.reject();}});return deferred.promise;} else {return $q.when(true);}}};return {restrict: 'A',require: 'ngModel',link: link}};myUniqueDirective.$inject = injectParams;angular.module('customersApp').directive('myUnique', myUniqueDirective);
}());

 

转载于:https://www.cnblogs.com/darrenji/p/5158145.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/549700.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP技巧:在Access数据库中重命名表

下面代码是用Adox重命名Access表名的示例代码&#xff1a; Dim Conn,ConnStr,oCat,oTbl ConnStr "ProviderMicrosoft.Jet.OLEDB.4.0;Data Source" & Server.MapPath("data.mdb") Set oCatServer.CreateObject("ADOX.Catalog") oCat.Active…

Centos 系统安装NetCore SDK命令以及一系列操作(2)

ok,接下来安装dotnetCore的SDK&#xff0c;访问&#xff1a;https://dotnet.microsoft.com/download&#xff0c; 如下图&#xff0c;选择Linux&#xff0c; 选择一下这个Linux的发行版&#xff0c;我们选择Centos就行&#xff0c;然后执行这些命令去安装SDK&#xff0c;地址如…

这该死的高度,height,clientHeight,scrollHeight,offsetHeight

引言: 虽然有时候界面的设置不是我们这些后台代码人员的工作,但是有时候却难以理解控件生成时的一些怪事,比方在学习webabcd的扩张GridView中固定列时,你或许已经被其中的height,clientHeight,scrollHeight,offsetheight弄得晕晕的了,当然这些都是网页制作的一个基础,将其记下,…

C#高级语法基础知识总结6——字符串集合

字符串 集合 列表声明 Var intListnew List<int>();Var racersnew List<Racer>();List<int> intListnew List<int>(10);//大小为10&#xff0c;倍数增加 使用Capacity属性可以获取和设置集合的容量 使用Count属性可以获取集合的元素个数 Add()方法添加…

瓦尔都窗前的一瞥 ①

面对着围着哥本哈根的、生满了绿草的城堡&#xff0c;是一幢高大的红房子。它的窗子很多&#xff0c;窗子上种着许多凤仙花和青蒿一类的植物。房子内部是一副穷相&#xff1b;里边住的也全是一些穷苦的老人。这就是“瓦尔都养老院”。  看吧&#xff01;一位老倚着窗槛站着&a…

浏览器播放rtsp视频流方案(vlc转http方案)

一.vlc播放器转成http&#xff0c;在浏览器用video标签播放 1.下载vlc播放器 网址:https://www.videolan.org/ 2.安装并打开之后&#xff0c;点击媒体 3.点击打开网络串流&#xff0c;进入到下个页面&#xff0c;在输入框输入自己的rtsp流 4.点击播放旁边的小三角号&#xff0c…

qsort和sort的区别 转载

qsort和sort的区别 First qsort 基本快速排序的方法&#xff0c;每次把数组分成两分和中间的一个划分值&#xff0c;而对于有多个重复值的数组来说&#xff0c;基本排序的效率较低。集成在C语言库函数里面的的qsort函数&#xff0c;使用 三 路划分的方法解决这个问题。所谓三路…

浏览器播放rtsp视频流方案(ffmpeg + nginx转m3u8)

1.下载ffmpeg &#xff0c;传送门&#xff1a;https://ffmpeg.en.softonic.com/ 2.配置环境变量 右击我的电脑---->点击属性&#xff0c;打开左侧高级系统设置 点击下方的环境变量 在下方系统变量中找到path变量&#xff0c;选中点击下方编辑&#xff0c;别点成删除&#…

RIA说文解字

微软 WPF/Sliverlight Adobe AIR&#xff08;Adobe Integrated Runtime&#xff09; Java JavaFX 三种主流RIA开发平台评测报告 评测对象为Adobe Flex&#xff0c;微软的ASP.Net AJAX和Curl RIA平台。 测试发现&#xff0c;ASP.Net AJAX尤其适合B2C也即商家对消费者&#xff08…

酒桌游戏

酒桌游戏 酒桌上&#xff0c;敬酒是比较通俗的方式&#xff0c;但是敬酒就会产生 求人与被求人 的关系。同是同学。可能还是游戏的方式放松些~ 抽手游戏 大家把手伸出来&#xff0c;数1&#xff0c;2&#xff0c;3~~~ 最后一个人&#xff0c;喝酒 两人同叫&#xff0c;两人喝酒…

浏览器播放rtsp视频流方案(ffmpeg + nginx转rtmp)

之前已经更新vlc和m3u8的方案了&#xff0c;这个是最后一个方案&#xff0c;同时&#xff0c;转rtmp的方案也是我在用的 1.下载ffmpeg &#xff0c;传送门&#xff1a;https://ffmpeg.en.softonic.com/ 2.配置环境变量 右击我的电脑---->点击属性&#xff0c;打开左侧高级…

由Dvbbs PHP 0day引发的争论

由Dvbbs PHP 0day引发的争论昨天刚刚得到Dvbbs PHP 0day 的资料&#xff0c;看来还是晚了&#xff0c;今天无意间发现了有趣的事情&#xff0c;所以就给大家贴出来。呵呵漏洞给大家播报下Dvbbs PHP 0day影响版本&#xff1a;2.0漏洞文件&#xff1a;/boardrule.phpAuthor&#…

图形学中的 显示表示 和 隐式表示

简介 The two most common methods of representing curves and surfaces in geometric modeling are implicit equations and parametric functions.// 两个最基础的方法在表示曲面和形状在几何建模是隐式表示和显示表示 隐式表示 The implicit equation of a curve lying in …

uniapp+typeScript+vue3.0+vite

最近公司需要开发新版小程序&#xff0c;思考了一下&#xff0c;决定还是用最新的技术进行开发&#xff0c;同时也能锻炼到自己&#xff0c;废话不多说&#xff0c;开搞&#xff1a; 一.首先打开uniapp的官网&#xff1a;uni-app官网 //环境安装 //全局安装vue-cli npm instal…

纪中七日游——总结篇 DAY1AB

DAY 1 B 组 T1 游戏 Description Alice和Bob在玩一个游戏&#xff0c;游戏是在一个N*N的矩阵上进行的&#xff0c;每个格子上都有一个正整数。 当轮到Alice/Bob时&#xff0c;他/她可以选择最后一列或最后一行&#xff0c;并将其删除&#xff0c; 但必须保证选择的这一行或这一…

做返回功能的醒悟

以前做返回是先取得跳转到本页面的地址&#xff08;后台方法 Request.ServerVariables["HTTP_REFERER"] 还可以是Request.UrlReferrer等&#xff09;&#xff0c;然后再跳转到原页面作返回功能今天遇外发现JS有个方法javascript:history.back(1);&#xff0c;可以实现…

系列十一(实战)、发送 接收带标签的消息(Java操作RocketMQ)

一、发送 & 接收带标签的消息 1.1、概述 消息的种类纷繁复杂&#xff0c;不同的业务场景需要不同的消息&#xff0c;基于此RocketMQ提供了消息过滤功能&#xff0c;通过Tag或者Key进行区分&#xff0c;本章介绍Tag&#xff0c;我们再往一个Topic里面发送消息的时候&#x…

Comments are not permitted in JSON

用vsCode开发uniappvue3.0TypeeScriptvite项目的时候&#xff0c;打开json文件报错Comments are not permitted in JSON。 解决办法如下&#xff1a; 1.点击右下角 2.输入JSON选择第二个JSON with Comments即可

OCP-052考试题库汇总(32)-CUUG内部解答版

Which state must a database be to enable ARCHIVELOG ? A)NOMOUNT B)OPEN IN READ WRITE mode C)OPEN IN READ ONLY mode D)OPEN IN RESTRICTED mode E)MOUNT Answer: E 赵&#xff1a; 题译&#xff1a;数据库必须是哪个状态才能启用 ARCHIVELOG? oracle 启动分为三步&…

微软推中文Live地图搜索服务与Office集成

2008年1月15日&#xff0c;微软MSN在北京宣布正式推出中文版Live地图搜索。Live地图搜索基于微软Virtual Earth技术&#xff0c;目前涵盖中国114个城市信息&#xff0c;并推出为中国市场特别研发的公交换乘线路查询。 现在是进入的最好时期随着城市基础设施建设不断发展&#x…