Question

我有一个api返回的json，我通过ng model

绑定到表单元素

来自api的返回数据是UPPERCASE，我该如何应用filter / css？将所有单词中的每个首字母都作为大写

＆＃13;

<input type = text ng-model = string>

＆＃13;

需要将此字符串绑定到控制器中的值（通过API获取）绑定到驼峰

Answer 1

使用angular的lowercase过滤器，然后使用css转换文本。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.string = 'LOREM IPSUM DOLOR SIT AMET, DUIS VIDIT DEFINITIONES MEL NE'
});

input {
  text-transform: capitalize;
  padding:10px;
}

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app=myApp ng-controller=myCtrl>
  <input type=text ng-model="string | lowercase" >
</div>

Answer 2

您可以使用此解决方案。

 var app = angular.module('app', []);
 app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
  });

app.filter('capitalize', function() {
   return function(input) {
     return (!!input) ? input.charAt(0).toUpperCase() + 
     input.substr(1).toLowerCase() : '';
  }
});

视图必须像这样

<p><b>My Text:</b> {{msg | capitalize}}</p>

Answer 3

您可以使用vanilla JavaScript解决方案：

function capitalize(str){
    if(!str || typeof str !== 'string')
        return ""

    var newString = str; 
    var firstLetter = str[0];
    newString = newString.toLowerCase().slice(1, newString.length);

    return [firstLetter, newString].join('');
}

否则您可以使用AngularJS过滤器

angular
    .module('app')
    .filter('capitalize', capitalize)

capitalize与我上面写的功能完全相同。这使您能够直接在视图中使用它：

<span>{{::vm.value | capitalize}}</span>

如何将每个单词的首字母大写通过ng-model绑定

3 个答案: