AngularJS预输入+多选择标签 [英] AngularJS typeahead + multi select tags

查看:127
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆