AngularJS限制文本框上字符串的長度

-1

我有一個文本框是自動完成文本框。我的意思是，當我輸入3個字符時，它會自動向我顯示約3個字符的相關數據。AngularJS限制文本框上字符串的長度

我想，如果我選擇值長於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。

來源

2017-01-18 user3441151

嘗試使用limitTo過濾器

來源

2017-01-18 11:35:45

我在哪裏應該寫這個？ – user3441151

我正在考慮把它放在你的輸入的屬性值中，但它已經改變了它本身的值。你應該做的是將其分配給另一個變量，以便在從自動完成選擇後值不會改變。 –

對不起，我不明白你想說什麼。你能寫一些關於這個的代碼嗎？ – user3441151

我寫了一個指令，禁止用戶鍵入比最大定義更多的字符。

我適應它一下你的需求（長度和「...」時，最大長度爲超過）：

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>

來源

2017-01-18 13:05:15 Mistalis

我如何顯示工具提示？ – user3441151

AngularJS限制文本框上字符串的長度

回答

相關問題