AngularJS指令输入宽度通过keyup调整大小

前端之家收集整理的这篇文章主要介绍了AngularJS指令输入宽度通过keyup调整大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个指令,以便在keyup(如Google Contacts)时自动调整宽度的输入.然而,似乎不太好,因为每个字符的宽度是不同的.你能帮我提一下更优化的方法吗?韩国社交协会.

http://plnkr.co/edit/DSn0JDDShOXvuXXF9PP2?p=preview

解决方法

基于@ notme的答案,我为自己的自动调整大小输入角度指令版本创建了以下要点:

https://gist.github.com/Zmaster/6923413

这是代码

模板:

<span>
  <input type="text" ng-model="value">
  <span style="visibility:hidden; position:absolute; left:-1000; top:-1000;">{{value}}</span>
</span>

指示:

angular.module('autoSizeInput',[]) 
  .directive('autoSizeInput',function() {
    return {
      replace: true,scope: {
        value: '=inputValue'
      },templateUrl: 'templates/directives/autoSizeInput.html',link: function(scope,element,attrs) {
        var elInput = element.find('input');
        var elSpan = element.find('span');
        elSpan.html(elInput.val());

        scope.$watch('value',function(value) {
          if(value) {
            elSpan.html(elInput.val());
            elInput.css('width',(elSpan[0].offsetWidth + 10) + 'px');
          }   
        }); 
      }   
    };  
  });

猜你在找的Angularjs相关文章