AngularJS預輸入+多選擇標籤

Question

我正在尋找的是類似於Gmail的預輸入電子郵件地址

挑戰一個輸入：

1）應同時顯示名稱EmailAddress的和圖片（基本上是一個可定製的模板）

2）它應該顯示添加到列表中的聯繫人的姓名

3）應與退格合作，以刪除以前的條目

4）應與選擇工作，並添加新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', 
} 
});