如何根据Angular 1.5中的字符串长度将文本更改为大写或小写？答案

【问题标题】：How to change text to upper case or lower case depending on string length in Angular 1.5?如何根据Angular 1.5中的字符串长度将文本更改为大写或小写？
【发布时间】：2017-10-17 10:51:28
【问题描述】：

我正在尝试在名为 name 的字符串上实现文本格式。一旦将字符串输入到 html 表单中，单击保存按钮后，新的字符串格式应呈现在表单下方。应根据字符串长度将字符串更改为大写或小写。如果字符串长度为偶数，则字符串应改为大写，如果字符串长度为奇数，则字符串应改为小写。

我已经将更改文本大小写的逻辑放在了“formatFactory”工厂中。“格式工厂”内部的格式方法负责更改文本大小写。

formattingFactory.js

app.factory('formatFactory', function(){

var formattingFactoryObject = {};

formattingFactoryObject.format = function(name) {

    if(name.length % 2 == 0) {
        name.toUpperCase();
    }else{
        name.toLowerCase();
    }
}


});

我有以下服务负责保存会话数据，即名称和昵称字符串

sessionService.js

angular.module('app').service('sessionService',[
'$window',
//the $window object provides angular access to the browser's window object
sessionService
]);

function sessionService($window) {
  this.save = save;
  this.get = get;
  this.clear = clear;

function save(key, value) {

    $window.sessionStorage.setItem(key, value);


 }

 function get(key, value) {
    return $window.sessionStorage.getItem(key);


}

以下是我的控制器。我在vm.setServiceSession方法中保存会话数据的方法之前调用了更改字符串大小写的方法

sessionController.js

angular.module('app').controller('sessionController',[
'sessionService','formatFactory',

function sessionController(sessionService) {
    var vm = this;

    vm.getServiceSession = function() {
        vm.model = {
            name: sessionService.get('name'),
            nickname: sessionService.get('nickname'),
            status: 'Retrieved by service on ' + new Date()
        };
    }

    vm.setServiceSession = function() {

        formattingFactoryObject.format(name);

        sessionService.save('name', vm.model.name);

        sessionService.save('nickname', vm.model.nickname);
        vm.getServiceSession();

    }

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
    <title>Services and Factories</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body ng-controller="sessionController as vm">
<div class="container">
    <h1>Services and Factories</h1>
    <div class ="form-group row">
        <div class ="col-sm-4">
            <label>Name</label>
        </div>
        <div class ="col-sm-8">
            <input type = "text" class ="form-control" ng-model ="vm.model.name">
        </div>
    </div>
    <div class ="form-group row">
        <div class ="col-sm-4">
            <label>Nickname</label>
        </div>
        <div class ="col-sm-8">
            <input type = "text" class ="form-control" ng-model ="vm.model.nickname">
        </div>
    </div>

    <div class = "form-group row">
        <div class = "col-sm-8 col-sm-offset-4">
            <input type = "button" ng-click = "vm.setServiceSession()" class = "btn btn-primary" value = "Save"/>
            <input type = "button" ng-click ="vm.getServiceSession()" class = "btn btn-default" value = "Retrieve from Service"/>


        </div>
    </div>
    <pre>{{vm.model | json }}</pre>



</div>

上面代码的问题是它没有改变字符串大小写，我不知道为什么。

【问题讨论】：

String.toLowerCase 不会更新值。它返回一个新字符串。你将不得不分配它。试试name = name.toLowerCase()

标签： javascript angularjs

【解决方案1】：

正如@Rajesh 在他的评论中所说，您需要将name.toLowerCase() 和name.toUpperCase() 的新值分配给新值name，当然最后在您的工厂中返回name。您还必须格式化 $scope.model.name，同时将其保存在 localStorage 中，如下所示：

sessionService.save('name', formatFactory.formattingFactoryObject($scope.model.name));

你还需要重构你的工厂。

我创建了一个有效的Fiddle。

【讨论】：