AngularJS 텍스트 상자의 문자열 길이 제한

Question

텍스트 상자 하나에 자동 완성 텍스트 상자가 있습니다. 3 문자를 입력하면 3 문자 관련 데이터가 자동으로 표시됩니다.

는 내가 더 이상 값을 선택하면 31 개 문자가 1 ~ 28을 선택하고 표시 문자 후 잘라 3 점 (...)

추가되는 것을 원하는 그리고 전체 값을 툴팁을 추가하려면 텍스트 상자에 마우스를 올려 놓습니다.

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>