AngularJS预先输入多选标签

我正在寻找的是类似于电子邮件地址的Gmails typeahead的输入

挑战:

1)它应该显示Name EmailAddress和Image(基本上是一个可自定义的模板)

2)它应显示添加到列表中的联系人的姓名

3)它应该使用退格键来删除前一个条目

4)它应该与select一起工作,并添加新的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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...