AngularJS typeahead + multi select-Tags

Question

Was ich suche ist eine Eingabe, die Gmails typeahead für E-Mail-Adressen

Herausforderungen ähnelt:

1) Es sollte angezeigt werden sowohl die Namen und Emailaddress Bild (im Grunde eine kundengerechte schablone)

2) Es sollte den Namen des Kontakts angezeigt werden hinzugefügt, um die Liste

3) Es sollte mit Backspace arbeiten, um den vorherigen Eintrag

4) Es sollte funktionieren mit ausgewähltem und zu entfernen, die neuen etnry

Answer 1

.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', 
} 
});