- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
(function() {
'use strict';
angular.module('peoplePickerCombo', []);
angular.module('peoplePickerCombo')
.directive('peoplePicker', function() {
return {
restrict: 'E'
,require: 'ngModel'
,scope : {
ngDisabled : '=?'
,placeholder : '@'
,secondaryPlaceholder : '@'
,users : '=ngModel'
,maxChips : '@'
,minChips : '@'
,service : '&'
,required : '@'
}
//,templateUrl : './resources/module/combo/people-picker/people-picker.template.html'
,template : '<div class="md-chip-container md-block" ng-class="{there : !users.length}" flex>\
<label ng-if="!!users.length">{{placeholder}}</label>\
<md-chips\
readonly="ngDisabled || readonly"\
aria-label="{{placeholder}}"\
class="custom-chips"\
secondary-placeholder="{{secondaryPlaceholder}}"\
md-max-chips="{{maxChips}}"\
ng-model="users"\
md-autocomplete-snap\
md-require-match="true"\
md-separator-keys="[13,186]">\
<md-autocomplete\
md-menu-class="md-contact-chips-suggestions"\
md-selected-item="selectedUser"\
md-search-text="searchText"\
md-items="item in comboCtrl.userLookupService(searchText)"\
md-item-text="comboCtrl.itemText(item)"\
md-no-cache="true"\
ng-disabled="ngDisabled || (users.length==maxChips)"\
md-floating-label="{{users.length ? (users.length==maxChips?\'\':secondaryPlaceholder) : placeholder}}"\
md-autoselect>\
<div class="md-contact-suggestion">\
<!-- <img ng-init="getPic(item)"\
ng-src="{{item.Picture}}"\
alt="{{item.DisplayName}}"\
/> -->\
<span\
class="md-contact-name"\
md-highlight-text="userSearchText"\
md-highlight-flags="ig">\
{{item.DisplayName}}\
</span>\
<span class="md-contact-email">{{item.Email}}</span>\
</div>\
</md-autocomplete>\
<md-chip-template>\
<div class="md-contact-avatar">\
<img data-ng-src="{{$chip.PictureURL}}" />\
</div>\
<div class="md-contact-name">{{$chip.DisplayName}}</div>\
</md-chip-template>\
<button md-chip-remove class="md-primary rchip">\
<!--<md-icon md-font-set="material-icons"> close </md-icon>-->x\
</button>\
</md-chips>\
</div>'
//,replace : true
,link: function(scope, element, attrs, ctrl) {
//debugger;
scope.users = scope.users || [];
//scope.userLookupService
//scope[attrs.ngModel] = scope.users;
if (angular.isDefined(attrs.ngDisabled) ) {
scope.$watch('ngDisabled', function(isDisabled) {
scope.ngDisabled = isDisabled;
});
}
/*ctrl.$validators.atleast = function(modelValue,viewValue) {
console.log(modelValue , viewValue)
return !!(modelValue && modelValue.length>0);
};
scope.$watch('users.length',function(newVal,oldVal){
ctrl.$validate();
});*/
//If provided with an array of user ids, Guess by string
if(scope.users && scope.users.length){
var s = scope.service();
angular.forEach(scope.users,function(obj,idx){
if(angular.isNumber(obj)){
s(obj).then(function(r){
scope.users[idx] = r[0];
});
}
});
}
}
,controller : ['$scope', '$timeout', '$q', function($scope, $timeout, $q){
var vm = this;
vm.itemText = function(item){
return item.DisplayName;
};
vm.userLookupService = $scope.service();
//If provided with an array of nbk ids, Guess by string
if($scope.users && $scope.users.length){
angular.forEach($scope.users,function(obj,idx){
if(angular.isString(obj)){
vm.userLookupService(obj).then(function(r){
$timeout(function(){
$scope.users[idx] = r[0];
});
});
}
});
}
}]
,controllerAs : 'comboCtrl'
};
});
angular.module('peoplePickerCombo')
.directive('required', function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
if (!ctrl) {
return false;
}
ctrl.$validators.required = function(modelValue,viewValue) {
//console.log(modelValue , viewValue)
return !!( modelValue && modelValue.length>0 );
};
}
}
});
})();
/* Styles go here */
/*people-picker*/
people-picker md-autocomplete md-autocomplete-wrap md-progress-linear {
bottom: -12px !important;
}
people-picker md-input-container {
bottom: 10px !important;
min-width: 400px !important;
}
people-picker md-chip {
position: relative !important;
padding: 0 20px 0 1px !important;
box-shadow: 1px 1px 1px #888;
}
people-picker .customMessages {
color: rgb(221, 44, 0);
font-size: 12px;
overflow: hidden;
-webkit-transition: all .3s cubic-bezier(.55, 0, .55, .2);
transition: all .3s cubic-bezier(.55, 0, .55, .2);
opacity: 1;
margin-top: 0;
padding-top: 5px;
}
people-picker .md-chips md-chip .md-contact-avatar {
float: left;
}
people-picker .md-chips md-chip .md-contact-avatar img {
height: 32px;
border-radius: 16px;
}
people-picker .md-chips md-chip .md-contact-name {
padding: 0 5px;
}
people-picker md-chip .md-chip-remove-container {
position: absolute !important;
right: 4px !important;
top: 4px;
margin-right: 0;
height: 24px;
}
people-picker md-chip .md-chip-remove-container button.rchip {
position: relative;
height: 24px;
width: 24px;
line-height: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
transition: background 0.15s linear;
display: block;
}
people-picker md-chip .md-chip-remove-container button.rchip md-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.7);
color: white;
fill: white;
}
people-picker md-chip .md-chip-remove-container button.rchip:hover,
people-picker md-chip ._md-chip-remove-container button.rchip:focus {
background: rgba(255, 0, 0, 0.8);
}
people-picker md-chip md-chip-template {
/*padding-right: 4px;*/
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
people-picker > .md-chip-container > label {
font-size: 14px;
color: rgba(0, 0, 0, 0.38);
/*label which is shown when user is selected | Not Secondary Placeholder*/
}
people-picker md-input-container label {
font-size: 14px;
/*placeholder and secondary placeholder*/
}
people-picker[required] .md-chip-container.there > label::after,
people-picker[required] .md-chip-container.there md-input-container label::after {
content: ' *';
font-size: 13px;
vertical-align: top;
}
/* Not using this one
people-picker .md-chip-container md-chips-wrap::before{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
pointer-events: none;
-webkit-font-smoothing: antialiased;
padding-left: 0px;
padding-right: 0;
z-index: 1;
-webkit-transform: translate3d(0,28px,0) scale(1);
transform: translate3d(0,28px,0) scale(1);
transition: -webkit-transform .4s cubic-bezier(.25,.8,.25,1);
transition: transform .4s cubic-bezier(.25,.8,.25,1);
max-width: 100%;
-webkit-transform-origin: left top;
transform-origin: left top;
position:absolute;
color: rgba(0,0,0,0.38);
content : attr(label);
font-size:15px;
}
people-picker .md-chip-container md-chips-wrap.md-focused::before
,people-picker .md-chip-container md-chips.ng-dirty md-chips-wrap::before
,people-picker .md-chip-container md-chips.ng-not-empty md-chips-wrap::before{
-webkit-transform: translate3d(0,-108px,0) scale(.80);
transform: translate3d(0,-108px,0) scale(.80);
transition: -webkit-transform cubic-bezier(.25,.8,.25,1) .4s,width cubic-bezier(.25,.8,.25,1) .4s;
transition: transform cubic-bezier(.25,.8,.25,1) .4s,width cubic-bezier(.25,.8,.25,1) .4s;
}
people-picker .md-chip-container md-chips-wrap.md-focused::before{
color:rgb(63,81,181);
}
people-picker .md-chip-container md-chips-wrap.md-readonly::before{
-webkit-transform: translate3d(0,-11px,0) scale(1);
transform: translate3d(0,-11px,0) scale(1);
}*/
people-picker .md-chip-container md-chips-wrap.md-readonly {
box-shadow: none;
border-bottom: 1px dotted #CCC;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css" />
</head>
<body>
<div ng-app="app" ng-cloak>
<form novalidate name="pForm" ng-controller="MainCtrl as ctrl">
<md-content layout-padding>
<div style="background: #abcdef;">
This one doesn't throw error on empty even when required directive and $validator is programmed, Why
</div>
<div>
<people-picker required name="user" ng-disabled="false" service="ctrl.userLookupService" max-chips="10" placeholder="User" secondary-placeholder="Add Another?" ng-model="ctrl.users" aria-label="Users"></people-picker>
<div ng-messages="pForm.user.$error" class="customMessages">
<div ng-message="required">User is required</div>
<div ng-message="resolve">One or more users have not been resolved</div>
</div>
</div>
<div> </div>
<div> </div>
<div style="background: #abcdef;">
Below one (Title) throws error on blur if empty | Error Goes away if valid | works even with keystrokes
</div>
<div>
<md-input-container class="md-block" flex>
<input type="text" placeholder="Title" aria-label="Title" required name="title" ng-model="ctrl.Title">
<div ng-messages="pForm.title.$error">
<div ng-message="required">Title is required</div>
</div>
</md-input-container>
</div>
<div>
<md-button type="submit">Submit</md-button>
</div>
</md-content>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<!--<script src="people-picker.directive.js"></script>-->
<script>
(function() {
'use strict';
angular.module('app', ['peoplePickerCombo', 'ngMaterial', 'ngMessages']);
angular.module('app')
.controller('MainCtrl', ['$scope', '$timeout', '$q',
function($scope, $timeout, $q) {
var vm = this;
vm.users = [34, 89, 55];
//Simulate a service
vm.userLookupService = function(q) {
var d = $q.defer();
//debugger;
$timeout(function() {
var list = ["Beast BoyChangeling", "Phantom Stranger", "Vril Dox", "The Shade", "Robotman", "Captain Atom", "Elongated Man", "Amanda Waller", "Green Lantern", "Adam Strange", "Deadman", "Atom", "Nightwing", "Demeain Dark", "Elijah Snow", "Sandman", "Cyborg", "Ra’s Al Ghul", "Raven", "Hitman", "Jimmy Olsen", "Dr. Mahhattan", "Midnighter", "Lobo", "Alfred Pennyworth", "Brainiac 5", "Static", "Big Barda", "Catman", "The Riddler", "Doctor Fate", "Wildcat", "Black Adam", "Two-Face", "Mister Miracle", "Green Lantern", "Plastic Man", "Firestorm", "Starfire", "Batgirl", "Red HoodRobin", "Bigby Wolf", "Poison Ivy", "SpeedyArsenalRed Arrow", "Jonah Hex", "Yorick Brown", "Spectre", "Green Lantern", "Deathstroke", "Commisioner James Gordon", "Death", "Spider Jerusalem", "The Question", "Lois Lane", "Blue Beetle", "Flash", "Deadshot", "Supergirl", "Question", "Jesse Custer", "Huntress", "Animal Man", "Donna Troy", "Sinestro", "ImpulseKid Flash", "Harley Quinn", "Batwoman", "Batgirl", "Hawkman", "Darkseid", "Starman", "Zatanna", "Blue Beetle", "Sandman", "Catwoman", "Swamp Thing", "Captain Marvel", "Green Lantern", "Martian Manhunter", "Aquaman", "Rorschach", "Black Canary", "Power Girl", "Superboy", "John Constantine", "Lex Luthor", "Robin", "Booster Gold", "Green Lantern", "Green Arrow", "Barbara Gordon", "Flash", "Tim Drake", "Wonder Woman", "Flash", "Green Lantern", "Joker", "Dick Grayson", "Superman", "Batman"];
list = list.map(function(a, i) {
return {
UserName: i,
DisplayName: a,
Email: a.replace(/[^\w]/gi, '').toLowerCase() + '@dccomics.com',
PictureURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAdVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA268pkAAAAJnRSTlMAAAICBAgMFhwmKjA4QFJUWFxeYm6Zm6urrbvBx8/X2dvf3+/9/fI9ls0AAACsSURBVCiRbdDZDoMgEAXQcau7uCsuoFX5/08stlACcp8m9yRkBgCZEq8rLsGMP7FvJt+Alom0eu8eEg5Xg4j9E2mQK8g1QAqQBqmCVIPgkv0V6Gv1EnrjjlDse4Tm6Qm9e5qYPcCr6rrqZZRuvY3xPcTjVqvTHUT4KyfBmJx8IMgRq87MyPxbuTV78cXe/oTd41A8e8YKDosNFoDM1jOWwWCHAYgdCDT0bQltPkJILs0IxHsZAAAAAElFTkSuQmCC'
}
});
var r = new RegExp(q, 'ig');
var response;
if (angular.isNumber(q)) {
response = [list[q]];
} else response = (list.filter(function(a) {
return r.test(a.DisplayName);
}).slice(0, 10));
d.resolve(response);
}, 100);
return d.promise;
};
}
]);
}());
</script>
</body>
</html>
在 Plunkr 中添加:https://plnkr.co/edit/1LgFCNqT0YDkyUAaC31C以及上面提供的代码片段。
上面的页面代码片段描述了一些问题。
描述:指令 people-pickcer
当我们在 md-autocomplete
中搜索时会引入用户标签,当选择某些内容时,它会转换为 md-chip 并添加到父项 md-chips
中。当所有芯片都被移除时,它应该抛出验证错误 <div ng-message="required">User is required</div>
。
用法:
<div>
<people-picker
required name="user" ng-disabled="false" service="ctrl.userLookupService"
max-chips="5" placeholder="User" secondary-placeholder="Add Another?"
ng-model="ctrl.users" aria-label="Users"></people-picker>
<div ng-messages="pForm.user.$error" class="customMessages">
<div ng-message="required">User is required</div>
<div ng-message="resolve">One or more users have not been resolved</div>
</div>
</div>
问题:如果您看到“标题”输入框,则每当因无效输入而模糊时都会引发错误。我尝试写一个 $validators
对于我的模块,但它永远不会触发,当我删除任何 md 芯片时,它也会触发所有验证(我认为它在删除任何芯片时尝试提交表单)。尝试在不触摸标题输入框的情况下删除 md-chip,您将看到标题验证器被触发,如果有更多带有验证的输入字段,如果我从选择中删除任何 md-chip,所有验证器都会被触发。
required
来 self 的模块的指令
angular.module('peoplePickerCombo')
.directive('required', function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
if (!ctrl) {
return false;
}
ctrl.$validators.required = function(modelValue,viewValue) {
//console.log(modelValue , viewValue)
return !!( modelValue && modelValue.length>0 );
};
}
}
});
预计当所有 md-chips 被移除时它应该抛出一个错误,但它从未抛出任何错误。
最佳答案
让我们将人员选择器组合的 required 指令重命名为 ppcRequired,否则它将应用于任何其他必需的输入。人员选择器看起来像
<people-picker ppc-required
name="user"
service="ctrl.userLookupService"
max-chips="10"
placeholder="User"
secondary-placeholder="Add Another?"
ng-model="ctrl.users"
aria-label="Users"></people-picker>
<div ng-messages="(pForm.$submitted || pForm.user.$touched) && pForm.user.$error" class="customMessages">
<div ng-message="required">User is required</div>
<div ng-message="resolve">One or more users have not been resolved</div>
</div>
由于模型更改 ( https://github.com/angular/material/issues/8126 ) 时未运行所需的验证器,因此我们使用 $watch 来触发所需的更改:
angular.module('peoplePickerCombo').directive('ppcRequired', function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
if (!ngModelCtrl) {
return false;
}
// override $isEmpty function
ngModelCtrl.$isEmpty = function (val) {
return !val || !val.length;
};
// add required validator
ngModelCtrl.$validators.required = function(modelValue) {
return !ngModelCtrl.$isEmpty(modelValue);
};
// watch for changes
scope.$watch(attrs.ngModel, function (nVal, oVal) {
if (nVal && nVal !== oVal) {
// run validations
ngModelCtrl.$$runValidators(nVal, oVal, function () {});
// update css classes
ngModelCtrl.$setTouched();
ngModelCtrl.$$updateEmptyClasses(nVal);
}
}, 1);
}
}
});
另外 2 个标题输入被 MD 标记为无效,但它们仍然未受影响,因此我们添加 CSS 类 md-touched,仅当字段被触摸或表单时才会出现提交:
<md-input-container class="md-block"
ng-class="{'md-touched': pForm.title.$touched || pForm.$submitted}"
flex>
<input type="text"
placeholder="Title"
aria-label="Title"
required
name="title"
ng-model="ctrl.Title">
<div ng-messages="(pForm.$submitted || pForm.title.$touched) && pForm.title.$error">
<div ng-message="required">Title is required</div>
</div>
</md-input-container>
添加一些 CSS:
md-input-container.md-touched.md-input-invalid label.md-required::after,
md-input-container.md-touched.md-input-invalid label.md-required,
people-picker.ng-invalid-required md-input-container label,
people-picker.ng-invalid-required md-input-container.md-input-focused label {
color: rgb(221, 44, 0);
}
md-input-container.md-input-invalid label.md-required::after,
md-input-container.md-input-focused label.md-required::after,
md-input-container.md-input-has-value label.md-required::after,
md-input-container.md-input-invalid label.md-required {
color: rgba(0, 0, 0, 0.54);
}
md-input-container.md-touched.md-input-invalid .md-input {
border-color: rgb(221, 44, 0);
}
md-input-container.md-input-invalid .md-input {
border-color: rgba(0, 0, 0, 0.12);
}
people-picker.ng-invalid-required md-chips .md-chips {
box-shadow: 0 1px rgb(221, 44, 0);
}
people-picker + .customMessages [ng-message] {
font-size: 12px;
line-height: 14px;
margin-top: 0;
opacity: 1;
overflow: hidden;
padding-top: 5px;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) 0s;
color: rgb(221, 44, 0);
}
[ppc-required] md-input-container label::after {
content: " *";
font-size: 13px;
vertical-align: top;
}
关于angularjs - Angular $validators 未触发或行为不当,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39781186/
这个问题已经有答案了: jQuery trigger click vs click ()? (3 个回答) 已关闭 5 年前。 我无法区分 trigger('click')与 trigger('cli
我正在运行 VS 2008 和 .NET 3.5 SP1。 我想在 HttpModule 中实现命中跟踪在我的 ASP.NET 应用程序中。很简单,我想。然而,BeginRequest我的事件 Htt
这是一段代码,我收到以下错误 #1064 - You have an error in your SQL syntax; check the manual that corresponds to yo
有没有办法用任意增量触发滚轮事件。就像 jQuery 对“点击”所做的那样: $('#selector').trigger('click'); 我需要类似的东西,只需一个滚轮即可: $('#selec
我正在尝试在配音数据库中触发时间。我想检查一下在不出现角色的电影配音中不能对角色进行配音。这是PDM: 和CDM 我是SQL的初学者,但我知道表“DUBBES”中应该有一些触发器。我试图做这样的事情,
这个问题已经有答案了: jquery programmatically click on new dom element (3 个回答) 已关闭 6 年前。 我有一个 jQuery 事件定义如下: $
主菜单的点击代码适用于类更改,但不适用于子菜单...当单击食物或鞋子等子菜单项时,它不会触发警报命令...事实上,悬停非常适合子菜单但不是活跃的 HTML
问题非常简单: $('#btn1').click(function(event){ alert( "pageX: " + event.pageX + "\npa
我使用 Spring 的调度程序 (@EnableScheduling) 并具有以下 @Scheduled 方法,该方法每分钟调用一次: @Component public class Schedul
错误 SQL 查询:文档 CREATE TRIGGER `triggers_div` AFTER INSERT ON `produits` FOR EACH ROW BEGIN INSERT INTO
我想在插入另一个表时填充表中的一些列值,并为特定列设置条件。我使用触发器: CREATE TRIGGER inserttrigger AFTER INSERT ON table1 FOR EACH R
我可以在 5.6 MySQL 环境中使用一些关于触发器的指导。我想创建一个触发器,如果发现具有相同速度的电脑的价格较低,则该触发器会停止更新。 架构是产品(制造商、型号、类型)PC(型号、速度、内
背景:我们有一个 completed_flag,默认为 0,当有人完成调查时更新为 1。我想记录这次更新发生的时间戳 在编写了这个触发器/函数以在标志从 0 触发到 1 时更新时间戳后,我怀疑我这样做
数据库中有两个表 KistStatus和 LastKistStatus .后者将保存 KistStatus 的所有“最新”值。 . KistStatus有大约 174.000 条记录,LastKist
我正在开发一个使用 APNS 的 iPhone 应用程序。我很清楚实现 APNS、创 build 备 token 的过程,等等等等……我不知道如何通过 Web 服务从提供商端触发和启动 APNS。任何
我有这个 javascript,当数量更改时会触发 update_cart... jQuery('div.woocommerce').on('change', '.qty', function
当我单击任何按钮时,click 事件不会被触发。艰难的是,我使用 $("div").on("click", "button", function () { 让它工作,但我想看到它使用 .class 工
如何在我的代码中触发 Android onCreateOptionsMenu 函数,即无需用户单击手机上的选项菜单按钮? 最佳答案 Activity.openOptionsMenu(); 就可以了 关
我将表单包装在 中然后我设置 list android:windowSoftInputMode="adjustResize" (默认 react native )。现在,当我用手指触摸事件手动聚焦一
我有一个 Android 编程问题。使用下面的代码我想验证一个字符串匹配。它验证正常,但 LogCat 显示 TextWatcher 方法在每次击键时触发两次,我不明白为什么。我希望每次击键只触发一次
我是一名优秀的程序员,十分优秀!