使用预先输入的角度浮动输入标签

Posted 2023-02-22

【中文标题】使用预先输入的角度浮动输入标签

【英文标题】：Angular floating input label to use typeahead

【发布时间】：2016-11-04 13:12:13

【问题描述】：

我使用了这里的一种风格：http://tympanus.net/Development/TextInputEffects/index.html

要创建输入指令，请参阅 plunker：https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

这对标准输入字段非常有用，但是，我正在努力使用 Twitter 提前输入：https://github.com/twitter/typeahead.js/

问题 - 我如何使用带有预输入的浮动输入标签？

app.directive('floatInput', function($compile) 
  return 
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: 
      elemTitle: '=elemTitle',
      elemtId: '=elemeId'
    ,
    templateUrl: 'input-template.html',
    link: function(scope, elem, attrs) 
      var ngModelName = elem.attr('input-model');
      var inputElem = angular.element(elem[0].querySelector('input'));
      inputElem.attr('ng-model', ngModelName);

      $compile(inputElem)(scope);
      $compile(inputElem)(scope.$parent);

      var inputLabel = angular.element(elem[0].querySelector('label span'));
      inputLabel.attr('ng-class', '\'annimate-input\' : '+ngModelName+'.length > 0');
      $compile(inputLabel)(scope);
    ,
    controller: function($scope) 
      $scope.title = $scope.elemTitle;
      $scope.inputId = $scope.elemId
    
  
)

HTML：

<div>
<span class="input input--juro">
    <input class="input__field input__field--juro" type="text" id="inputId" ng-model="tmp" />
    <label class="input__label input__label--juro" for="inputId">
    <span class="input__label-content input__label-content--juro">title</span>
  </label>
  </span>
</div>

【问题讨论】：

您在代码中哪里引用了typeahead？

@JossefHarush - 我还没有，我不知道从哪里开始。

请更清楚您有什么问题。你试过什么？您看到错误了吗？

@VadiemJanssens - 更新了有问题的帖子。

【参考方案1】：

我知道的最简单的实现方法是在指令的link 函数中初始化预先输入的输入。为了使用可用选项初始化预输入，我将为指令创建一个可选参数，并在提供列表的情况下选择性地将输入初始化为预输入输入。

以下是指令的外观示例：

app.directive('floatInput', function($compile) 
  return 
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: 
      elemTitle: '=elemTitle',
      elemtId: '=elemeId',
      typeaheadSrc: '=?typeaheadSrc'
    ,
    templateUrl: 'input-template.html',
    link: function(scope, elem, attrs) 
      var inputElem = angular.element(elem[0].querySelector('input'));

      if(scope.typeaheadSrc && scope.typeaheadSrc.length > 0)
        var typeahead = jQuery(inputElem).typeahead(
          hint: true,
          highlight: true,
          minLength: 1
        , 
          name: 'typeahead',
          source: substringMatcher(scope.typeaheadSrc)
        );
      
    ,
    controller: function($scope) 
      $scope.title = $scope.elemTitle;
      $scope.inputId = $scope.elemId
    
  
);
// from http://twitter.github.io/typeahead.js/examples/
var substringMatcher = function(strs) 
  return function findMatches(q, cb) 
    var matches= [],
        substrRegex = new RegExp(q, 'i');

    $.each(strs, function(i, str) 
      if (substrRegex.test(str)) 
        matches.push(value: str);
      
    );

    cb(matches);
  ;
;

我已经更新了你的 plunker 以达到预期的结果：Plunker