AngularJS의 입력 필드에서 첫 번째 문자를 자동 대문자로 바꾸는 방법은 무엇입니까?

AngularJS의 입력 필드에서 첫 번째 문자를 자동 대문자로 바꾸는 방법은 무엇입니까?

---

AngularJS 양식 요소 내부의 입력 필드에서 첫 번째 문자를 자동으로 대문자 화하는 방법은 무엇입니까?

이미 jQuery 솔루션을 보았지만 지시문을 사용하여 AngularJS에서 다르게 수행해야한다고 생각합니다.

---

예, 지시문을 정의하고 고유 한 파서 함수를 정의해야합니다.

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>

깡깡이

---

모든 것이 Angular 솔루션을 필요로하는 것은 아닙니다. jQuery 군중에서 이것을 많이 볼 수 있습니다. 그들은 값 비싼 jQuery 함수를 사용하여 순수한 자바 스크립트로 더 간단하거나 더 쉬운 일을하는 것을 좋아합니다.

따라서 대문자 화 기능이 매우 필요하고 위의 답변이이를 제공하지만 CSS 규칙 "text-transform : capitalize"를 사용하는 것이 훨씬 더 효율적입니다.

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

---

사용자 정의 필터 '대문자 화'를 만들고 원하는 문자열에 적용 할 수 있습니다.

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

필터 용 JavaScript 코드 :

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

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

---

CSS : first-letter 가상 클래스를 사용하십시오.

모든 것을 소문자로 입력하고 첫 글자에만 대문자를 적용해야합니다.

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

예 : http://jsfiddle.net/AlexCode/xu24h/

---

단어의 모든 첫 문자를 대문자로 바꾸도록 코드를 수정했습니다. ' john doe '를 제공하면 출력은 ' 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
     }
   };
});

---

필터와 지시문을 선호합니다. 이것은 커서 이동으로 작동합니다.

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;
            });
        }
    };
}]);

여기 바이올린이 있습니다

---

커서 문제 (Mark Rajcok의 솔루션)를 수정하려면 메서드 시작 부분에 element [0] .selectionStart를 저장 한 다음 element [0] .selectionStart 및 element [0] .selectionEnd를 저장된 값으로 재설정해야합니다. 반환 전 값. 선택 범위를 각도로 캡처해야합니다.

---

Mark Rajcok 솔루션에 대한 설명 : $ setViewValue를 사용할 때 파서와 유효성 검사기를 다시 트리거합니다. 대문자 화 함수의 시작 부분에 console.log 문을 추가하면 두 번 인쇄되는 것을 볼 수 있습니다.

다음 지시문 솔루션을 제안합니다 (ngModel은 선택 사항 임).

.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()));
                 });
             });
         }
     }
   };
});

---

다음은 첫 글자를 대문자로 표시하는 필터 용 코드 펜입니다. 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();}) : '';
    }
  });

---

CSS 전용 답변 외에도 항상 Twitter Bootstrap을 사용할 수 있습니다 .

<td class="text-capitalize">

---

Building off Mark Rajcok's solution; It's important to consider that the directive evaluate only when the input field in engaged, otherwise you'll get error messages firing off until the input field has a 1st character. Easy fix with a few conditionals: A jsfiddle to go with that: 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));
        }
       };
    });

---

The problem with css-ony answers is that the angular model is not updated with the view. This is because css only applies styling after rendering.

The following directive updates the model AND remembers the cursors location

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();
            }
        }
    };
}]);

---

You can use the provided uppercase filter.

http://docs.angularjs.org/api/ng.filter:uppercase

---

You could use pure css:

input { text-transform: capitalize; }

ReferenceURL : https://stackoverflow.com/questions/15242592/how-to-autocapitalize-the-first-character-in-an-input-field-in-angularjs