文字列内の各文字に数字を追加する

Question

私のコードでは、文字列内の文字の位置に応じて文字列中の各文字に数字を追加したいと思います。 "someString"のような文字列の出力をs1o2m3e4S5t6r7i8n9g10としたいのですが、今はsomeString10を取得しています。ここ

JSfiddle：これは私のHTMLでhttps://jsfiddle.net/tq0p6y74/

：

<div ng-controller="mainController"> 
    <div> 
    <label>Your string? 
    </label> 
    <input type="text" ng-model="someString" /> 
    </div> 
    <!--this calls the function and a variable--> 
    <h3>twitter.com/{{ lowercase() }}</h3> 
    <h3>twitter.com/{{ uppercase() }}</h3> 
    <h3>twitter.com/{{ string }}</h3> 
    <h3>twitter.com/{{ addNumToEachLetter() }}</h3> 
</div> 

そして、これはコントローラです：

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) { 
    $scope.someString = ''; 
    $scope.uppercase = function() { 
    return $filter('uppercase')($scope.someString); 
    }; 
    $scope.lowercase = function() { 
    return $filter('lowercase')($scope.someString); 
    }; 
    $scope.addNumToEachLetter = function() { 
    var numbered = $scope.someString + ($scope.someString.length); 
    if ($scope.handle.length == 0) 
     return ''; 
    else 
     return numbered; 
    }; 
}]); 

Answer 1

独自のフィルタを作成します。

myApp.filter('addNumToEachLetter', function(){ 
     return function(str){ 
     return str.split('').map(function(c, index){ return c + (index+1)}).join(''); 
     } 
    }) 

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter){ 
    $scope.someString = ''; 
    $scope.uppercase = function(){ 
     return $filter('uppercase')($scope.someString); 
    }, 
    $scope.lowercase = function(){ 
     return $filter('lowercase')($scope.someString); 
    }, 
    $scope.addNumToEachLetter = function(){ 
     return $filter('addNumToEachLetter')($scope.someString); 
    } 
}]); 

Answer 2

は単純にそうように、角度表現を使用：

<div ng-controller="mainController"> 
     <div> 
      <label>Your string? 
      </label> 
      <input type="text" ng-model="someString"/> 
     </div> <!--this calls the function and a variable--> 
     <h3>twitter.com/{{ someString | lowercase }}</h3> 
     <h3>twitter.com/{{ someString | uppercase }}</h3> 
     <h3>twitter.com/{{ string }}</h3> 
     <h3>twitter.com/{{ someString }}{{ someString.length ? someString.length : '' }}</h3> 
    </div> 

このタイプの式補間のために、コントローラ内で関数を呼び出す必要はありません。