AngularJS预输入+多选择标签 [英] AngularJS typeahead + multi select tags
本文介绍了AngularJS预输入+多选择标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找的是类似于Gmail的预输入电子邮件地址的输入
挑战
1)应同时显示名称EmailAddress的和图像(基本上是一个可定制的模板)
2)它应该显示添加到列表中的联系人的姓名
3)应与退格合作,以删除previous条目
4)应与选择工作,并添加新etnry
解决方案
.directive('预输入',函数(){
返回{
限制:AEC,
范围: {
型号:'= ngModel
},
链接:链接功能($范围,$元,$ ATTRS){
$范围。$腕表('inputValue将',功能(价值){
$ scope.changed();
}); $ scope.Emails = ['a@a.com','b@b.com','c@c.com']; $ element.bind(关键的keydown preSS功能(事件){
开关(event.key code){
案例40:
$范围。$应用(函数(){
如果($ scope.selected< $ scope.List.length){
$ scope.selected ++;
}
});
。事件preventDefault();
打破;
案例38:
$范围。$应用(函数(){
如果($ scope.selected大于0){
$ scope.selected--;
}
});
。事件preventDefault();
打破;
案例13:
$范围。$应用(函数(){
$ scope.selectAndClose($ scope.List [$ scope.selected]);
});
。事件preventDefault();
打破;
案例32:
案例188:
$范围。$应用(函数(){
inputValues = $ scope.inputValue.split(,);
对于(VAR I = 0; I< inputValues.length;我++){
如果(inputValues [I]。长度大于0){
$ scope.GetOrCreateEmailAndSelect(inputValues [I]);
}
}
$ scope.clear();
$ scope.close();
});
。事件preventDefault();
打破;
案例27:
$范围。$应用(函数(){
$ scope.close();
});
。事件preventDefault();
打破;
案例8:
$范围。$应用(函数(){
如果($ scope.inputValue == NULL || $ scope.inputValue.length == 0){
$ scope.model.pop();
}
});
打破;
}
}); $ scope.remove =功能(EMAILID){
$ scope.model.splice($ scope.model.indexOf(EMAILID),1);
} $ scope.changed =功能(){
fetchEmail({
EmailAddress__icontains':$ scope.inputValue
})。然后(功能(数据){
$ scope.List =数据;
如果(typeof运算($ scope.model)=== typeof运算([])及和放大器;!$ scope.model == NULL){
对于(VAR I = 0; I< $ scope.model.length;我++){
对于(VAR J = 0; J< $ scope.List.length; J ++){
如果($ scope.List [J] .ID == $ scope.model [I] .ID){
$ scope.List.splice(J,1);
}
}
}
}
$ scope.selected = 0;
dropdownShow = FALSE;
如果($ scope.List.length大于0){
如果(typeof运算($ scope.inputValue)=='不确定'和;!&安培; $ scope.inputValue == NULL!){
如果($ scope.inputValue.length→1){
dropdownShow = TRUE;
}
}
}
$ scope.dropdownShow = dropdownShow;
});
}; $ scope.selectAndClose =功能(值){
$ scope.select(值);
$ scope.clear();
$ scope.close();
}; $ scope.select =功能(值){
$ scope.model.push(值);
};
$ scope.clear =功能(){
$ scope.inputValue = NULL;
};
$ scope.close =功能(){
$ scope.dropdownShow = FALSE;
};
$ scope.GetOrCreateEmailAndSelect =功能(EmailAddress的){
EmailAddress的= EmailAddress.toString();
数据= $ scope.fetchEmail(EmailAddress的); //你可以在这里添加一个Ajax调用
如果(data.length == 0){
$ scope.CreateEmail(EmailAddress的);
}其他{
$ scope.select(数据[0]);
}
}); $ scope.fetchEmail =功能(EmailAddress的){
结果= [];
对于(VAR I = 0; I< $ scope.Emails.length;我++){
如果($ scope.Emails [I] .indexOf(EmailAddress的)-1个){
result.push($ scope.Emails [I]);
}
}
} $ scope.CreateEmail =功能(EmailAddress的){
$ scope.Emails.push(EmailAddress的);
};
}
$ scope.mouseoverChoice =功能(emailidobject){
$ scope.selected = $ scope.List.indexOf(emailidobject);
};
$ scope.editEmailId =功能(emailidobject){
$ scope.inputValue = emailidobject.EmailAddress;
$ scope.remove(emailidobject);
}
$ scope.CheckSelected =功能(元素){
如果(typeof运算($ scope.List)=='不确定'和;!&安培; typeof运算($ scope.selected)=='不确定'和;!&安培; typeof运算($ scope.List [$ scope.selected])! ==未定义){
返回$ scope.List [$ scope.selected] .ID == element.id;
}其他{
返回false;
}
}
},
templateUrl:typeaheadtemplate.html',
}
});
What I'm looking for is a input that resembles Gmails typeahead for email addresses
Challenges:
1) It should display both the Name EmailAddress and Image (Basically a customizable template)
2) It should display the Name of the contact added to the list
3) It should work with backspace to remove the previous entry
4) It should work with select and , to add the new etnry
解决方案
.directive('typeahead', function () {
return {
restrict: 'AEC',
scope: {
model: '=ngModel'
},
link: function link($scope, $element, $attrs) {
$scope.$watch('inputValue', function (value) {
$scope.changed();
});
$scope.Emails = ['a@a.com', 'b@b.com', 'c@c.com'];
$element.bind("keydown keypress", function (event) {
switch (event.keyCode) {
case 40:
$scope.$apply(function () {
if ($scope.selected < $scope.List.length) {
$scope.selected++;
}
});
event.preventDefault();
break;
case 38:
$scope.$apply(function () {
if ($scope.selected > 0) {
$scope.selected--;
}
});
event.preventDefault();
break;
case 13:
$scope.$apply(function () {
$scope.selectAndClose($scope.List[$scope.selected]);
});
event.preventDefault();
break;
case 32:
case 188:
$scope.$apply(function () {
inputValues = $scope.inputValue.split(',');
for (var i = 0; i < inputValues.length; i++) {
if (inputValues[i].length > 0) {
$scope.GetOrCreateEmailAndSelect(inputValues[i]);
}
}
$scope.clear();
$scope.close();
});
event.preventDefault();
break;
case 27:
$scope.$apply(function () {
$scope.close();
});
event.preventDefault();
break;
case 8:
$scope.$apply(function () {
if ($scope.inputValue == null || $scope.inputValue.length == 0) {
$scope.model.pop();
}
});
break;
}
});
$scope.remove = function (emailid) {
$scope.model.splice($scope.model.indexOf(emailid), 1);
}
$scope.changed = function () {
fetchEmail({
'EmailAddress__icontains': $scope.inputValue
}).then(function (data) {
$scope.List = data;
if (typeof ($scope.model) === typeof ([]) && $scope.model !== null) {
for (var i = 0; i < $scope.model.length; i++) {
for (var j = 0; j < $scope.List.length; j++) {
if ($scope.List[j].id == $scope.model[i].id) {
$scope.List.splice(j, 1);
}
}
}
}
$scope.selected = 0;
dropdownShow = false;
if ($scope.List.length > 0) {
if (typeof ($scope.inputValue) !== 'undefined' && $scope.inputValue !== null) {
if ($scope.inputValue.length > 1) {
dropdownShow = true;
}
}
}
$scope.dropdownShow = dropdownShow;
});
};
$scope.selectAndClose = function (value) {
$scope.select(value);
$scope.clear();
$scope.close();
};
$scope.select = function (value) {
$scope.model.push(value);
};
$scope.clear = function () {
$scope.inputValue = null;
};
$scope.close = function () {
$scope.dropdownShow = false;
};
$scope.GetOrCreateEmailAndSelect = function (EmailAddress) {
EmailAddress = EmailAddress.toString();
data = $scope.fetchEmail(EmailAddress); //you can add an ajax call here
if (data.length == 0) {
$scope.CreateEmail(EmailAddress);
} else {
$scope.select(data[0]);
}
});
$scope.fetchEmail =function(EmailAddress) {
result = [];
for (var i = 0; i < $scope.Emails.length; i++) {
if ($scope.Emails[i].indexOf(EmailAddress) > -1) {
result.push($scope.Emails[i]);
}
}
}
$scope.CreateEmail =function(EmailAddress) {
$scope.Emails.push(EmailAddress);
};
}
$scope.mouseoverChoice = function (emailidobject) {
$scope.selected = $scope.List.indexOf(emailidobject);
};
$scope.editEmailId = function (emailidobject) {
$scope.inputValue = emailidobject.EmailAddress;
$scope.remove(emailidobject);
}
$scope.CheckSelected = function (element) {
if (typeof ($scope.List) !== 'undefined' && typeof ($scope.selected) !== 'undefined' && typeof ($scope.List[$scope.selected]) !== 'undefined') {
return $scope.List[$scope.selected].id == element.id;
} else {
return false;
}
}
},
templateUrl: 'typeaheadtemplate.html',
}
});
这篇关于AngularJS预输入+多选择标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文