it-swarm.com.de

Wie kann das erste Zeichen in einem Eingabefeld in AngularJS autokapitalisiert werden?

Wie kann das erste Zeichen in einem Eingabefeld innerhalb eines AngularJS-Formularelements autokapitalisiert werden?

Ich habe die jQuery-Lösung bereits gesehen, glaube jedoch, dass dies in AngularJS durch die Verwendung einer Direktive anders erfolgen muss.

53
Federico Elles

Ja, Sie müssen eine Direktive definieren und Ihre eigene Parser-Funktion definieren:

myApp.directive('capitalizeFirst', function($parse) {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if (inputValue === undefined) { inputValue = ''; }
           var capitalized = inputValue.charAt(0).toUpperCase() +
                             inputValue.substring(1);
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.Push(capitalize);
         capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value
     }
   };
});

HTML:

<input type="text" ng-model="obj.name" capitalize-first>

Fiddle

98
Mark Rajcok

Bitte beachten Sie, dass nicht alles eine Angular-Lösung benötigt. Bei der jQuery-Menge sieht man das oft; Sie verwenden gern teure jQuery-Funktionen, um Dinge zu tun, die mit reinem Javascript einfacher oder einfacher zu erledigen sind.

Während Sie möglicherweise eine Großschreibungsfunktion benötigen, und die obigen Antworten liefern dies, ist es viel effizienter, nur die css-Regel "text-transform: groß" zu verwenden

<tr ng-repeat="(key, value) in item">
    <td style="text-transform: capitalize">{{key}}</td>
    <td>{{item}}</td>
</tr>
52

Sie können einen benutzerdefinierten Filter "groß" erstellen und auf jede beliebige Zeichenfolge anwenden:

 <div ng-controller="MyCtrl">
     {{aString | capitalize}} !
</div>

JavaScript-Code für den Filter:

var app = angular.module('myApp',[]);

myApp.filter('capitalize', function() {
    return function(input, scope) {
        return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});
23

Ich würde einen Filter und eine Direktive bevorzugen. Dies sollte mit der Cursorbewegung funktionieren:

app.filter('capitalizeFirst', function () {
    return function (input, scope) {
        var text = input.substring(0, 1).toUpperCase() + input.substring(1).toLowerCase();
        return text;
    }
});

app.directive('capitalizeFirst', ['$filter', function ($filter) {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, controller) {
            controller.$parsers.Push(function (value) {
                var transformedInput = $filter('capitalizeFirst')(value);
                if (transformedInput !== value) {
                    var el = element[0];
                    el.setSelectionRange(el.selectionStart, el.selectionEnd);
                    controller.$setViewValue(transformedInput);
                    controller.$render();
                }
                return transformedInput;
            });
        }
    };
}]);

Hier ist eine Geige

4
Yoggi

Änderte seinen Code, um jedes erste Zeichen von Word groß zu schreiben. Wenn Sie ' john doe ' angeben, lautet die Ausgabe ' John Doe '

myApp.directive('capitalizeFirst', function() {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           var capitalized = inputValue.split(' ').reduce(function(prevValue, Word){
            return  prevValue + Word.substring(0, 1).toUpperCase() + Word.substring(1) + ' ';
        }, '');
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.Push(capitalize);
         capitalize(scope[attrs.ngModel]);  // capitalize initial value
     }
   };
});
4
Pradeep Mahdevu

Verwenden Sie die CSS: Pseudo-Klasse für den ersten Buchstaben.

Sie müssen alles in Kleinbuchstaben schreiben und den Großbuchstaben nur auf den ersten Buchstaben anwenden

p{
    text-transform: lowercase;
}
p:first-letter{
    text-transform: uppercase;
}

Hier ein Beispiel: http://jsfiddle.net/AlexCode/xu24h/

4
AlexCode

Um das Cursorproblem zu beheben (von dem aus die Lösung von Mark Rajcok verwendet wird), können Sie mit Das Element [0] .selectionStart am Anfang Ihrer Methode Speichern und dann sicherstellen, dass Element [0] .selectionStart und Element [0 ] .selectionEnde den gespeicherten Wert vor der Rückgabe . Dies sollte den Auswahlbereich in Winkel erfassen

3
Barbara Hamde

Kommentar zur Mark Rajcok-Lösung: Bei Verwendung von $ setViewValue lösen Sie die Parser und Validatoren erneut aus. Wenn Sie am Anfang Ihrer Großbuchstabenfunktion eine console.log -Anweisung hinzufügen, wird diese zweimal gedruckt.

Ich schlage folgende Lösung vor (wobei ngModel optional ist):

.directive('capitalize', function() {
   return {
     restrict: 'A',
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
         var capitalize = function (inputValue) {
             return (inputValue || '').toUpperCase();
         }
         if(ngModel) {
             ngModel.$formatters.Push(capitalize);
             ngModel._$setViewValue = ngModel.$setViewValue;
             ngModel.$setViewValue = function(val){
                 ngModel._$setViewValue(capitalize(val));
                 ngModel.$render();
             };
         }else {
             element.val(capitalize(element.val()));
             element.on("keypress keyup", function(){
                 scope.$evalAsync(function(){
                     element.val(capitalize(element.val()));
                 });
             });
         }
     }
   };
});
2
marc carreras

Neben den Antworten, die nur CSS enthalten, können Sie immer Twitter Bootstrap verwenden:

<td class="text-capitalize">
1
dmvianna

Hier ist ein Codepen für einen Filter, der den ersten Buchstaben groß schreibt: http://codepen.io/WinterJoey/pen/sfFaK

angular.module('CustomFilter', []).
  filter('capitalize', function() {
    return function(input, all) {
      return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
    }
  });
1
Federico

Aufbau der Lösung von Mark Rajcok; Es ist wichtig zu berücksichtigen, dass die Direktive nur dann auswertet, wenn das Eingabefeld aktiviert ist. Andernfalls werden Fehlermeldungen angezeigt, bis das Eingabefeld ein erstes Zeichen enthält. __ Gehen Sie dazu: https://jsfiddle.net/Ely_Liberov/Lze14z4g/2/

      .directive('capitalizeFirst', function(uppercaseFilter, $parse) {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
              if (inputValue != null) {
              var capitalized = inputValue.charAt(0).toUpperCase() +
                inputValue.substring(1);
              if (capitalized !== inputValue) {
                 modelCtrl.$setViewValue(capitalized);
                 modelCtrl.$render();
              }
              return capitalized;
            }
          };
          var model = $parse(attrs.ngModel);
          modelCtrl.$parsers.Push(capitalize);
          capitalize(model(scope));
        }
       };
    });
0
Ely Liberov

Das Problem mit den Antworten von css-ony ist, dass das Winkelmodell nicht mit der Ansicht aktualisiert wird. Dies liegt daran, dass css nur nach dem Rendern das Styling anwendet. 

Die folgende Direktive aktualisiert das Modell UND speichert die Position des Cursors

app.module.directive('myCapitalize', [ function () {
        'use strict';

    return {
        require: 'ngModel',
        restrict: "A",
        link: function (scope, elem, attrs, modelCtrl) {

            /* Watch the model value using a function */
            scope.$watch(function () {
                return modelCtrl.$modelValue;
            }, function (value) {

                /**
                 * Skip capitalize when:
                 * - the value is not defined.
                 * - the value is already capitalized.
                 */
                if (!isDefined(value) || isUpperCase(value)) {
                    return;
                }

                /* Save selection position */
                var start = elem[0].selectionStart;
                var end = elem[0].selectionEnd;

                /* uppercase the value */
                value = value.toUpperCase();

                /* set the new value in the modelControl */
                modelCtrl.$setViewValue(value);

                /* update the view */
                modelCtrl.$render();

                /* Reset the position of the cursor */
                elem[0].setSelectionRange(start, end);
            });

            /**
             * Check if the string is defined, not null (in case of Java object usage) and has a length.
             * @param str {string} The string to check
             * @return {boolean} <code>true</code> when the string is defined
             */
            function isDefined(str) {
                return angular.isDefined(str) && str !== null && str.length > 0;
            }

            /**
             * Check if a string is upper case
             * @param str {string} The string to check
             * @return {boolean} <code>true</code> when the string is upper case
             */
            function isUpperCase(str) {
                return str === str.toUpperCase();
            }
        }
    };
}]);
0
Marcel