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

时间:2017-01-18 11:13:16

标签: javascript angularjs

我有一个自动填充文本框的文本框。我的意思是当我输入3个字符时,它会自动显示有关3个字符的相关数据。

我想要如果我在选择并显示1到28个字符后选择更长的值来切断31个字符,请添加3个点(...)

我想在文本框上添加鼠标悬停的完整值的工具提示。

html代码

=Round(Fields!YourNumber.Value, 2)

控制器代码

<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>

请帮我这样做。

我正在使用AngularJS。

2 个答案:

答案 0 :(得分:0)

尝试使用limitTo过滤器

{{myTxt | limitTo:28}} {{myTxt.length&gt; 28? '...':''}}

答案 1 :(得分:0)

我写了一条指令,禁止用户输入的字符多于定义的最大字符数。

我根据你的需要调整了一下(长度和超过max-length时的“......”):

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>