AngularJSテキストボックスの文字列の長さを制限する

Question

私は、テキストボックスの1つをオートコンプリートテキストボックスにしました。 3文字入力すると3文字分の関連データが自動的に表示されます。

私は3つのドット（...）

を追加し、31個の文字を28に選択し、表示文字の1の後に切断されていることを長い値を選択した場合、私は完全な値でツールチップを追加したいことをしたいですマウスオーバーでテキストボックスに

htmlコード

<form name="orgForm" ng-submit="validateOrg(orgForm)" novalidate> 
    <div class="wrapper"> 
     <div class="container"> 
      <section class="main-ctr">> 
       <div ng-include="'views/header.html'"></div> 
       <main> 
        <section class="fix-section" style="min-height: 0px;"> 
         <div class="form-group"> 
          <div class="input-wrap"> 
           <input type="text" autocomplete="off" name="orgName" class="form-input" ng-model="organization.name" 
            placeholder="Enter your organization name..." required typeahead-min-length='3' 
            uib-typeahead="state for state in orgList | filter:$viewValue | limitTo:8" class="form-control" 
            tooltip="asdasdasd" tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" /> 
           <div class="error" ng-show="orgForm.$submitted || orgForm.orgName.$dirty || orgForm.orgName.$touched"> 
            <span ng-show="orgForm.orgName.$error.required">Required Field</span> 
           </div> 
          </div> 
         </div> 
        </section> 
        <div class="button-ctr"> 
         <button class="button" ng-class="orgForm.$valid ? 'active' : 'disable'" type="submit">Validate 
         </button> 
        </div> 
       </main> 
      </section> 
     </div> 
    </div> 
</form> 

コントローラー・コード

.controller('verifyOrgCtrl', ['$rootScope', '$scope', '$state', '$http', 'dataServices', 'globalService', function ($rootScope, $scope, $state, $http, dataServices, globalService) { 
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     window.history.forward(); 
    }); 
    $scope.orgList = []; 
    dataServices.getOrgList().then(function (res) { 
     if (res.status) { 
      $scope.orgList = res.orgList; 
     } else { 
      $rootScope.serviceErrorMsg = res.error; 
      $state.go(res.redirectURL); 
     } 
    }); 
    $scope.organization = {}; 
    $scope.validateOrg = function (formName) { 
     $scope.formName = formName; 
     if ($scope.formName.$invalid) { 
      $scope.showErrorMsg = true; 
      return; 
     } 
    } 
}]) 

私はこれを行うには助けてください。

私はAngularJSを使用しています。

Answer 1

limitToフィルタに

{{myTxtを使用してみてください| limitTo：28}} {{myTxt.length> 28？ '...'： ''}}

Answer 2

私は、ユーザが定義された最大文字数を超えて入力することを禁止する指令を書いています。

（最大長を超えているとき、「...」の長さと）私はあなたのニーズにそれを少し適応：

angular.module('myApp').directive('maxLength', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, modelCtrl) { 
      modelCtrl.$parsers.push(function(inputValue) { 
       if(inputValue === undefined) return ''; 

       var cleanInputValue = inputValue.substring(0, 31); // Change max 
       if(cleanInputValue != inputValue) { 
        modelCtrl.$setViewValue(cleanInputValue); 
        modelCtrl.$render(); 
        return cleanInputValue + '...'; 
       } else { 
        return cleanInputValue; 
       } 
      }); 
     } 
    }; 
}); 

あなたはこのようにそれを使用することができます：

<textarea ng-model="myTextarea" maxLength></textarea>