如何從範圍對象中獲取所需的數字位數？

Question

從目標我需要拿起我只需要的數字。例如我有一個3位數的Number，我想在第二個跨度中顯示第一個span秒的第一個數字，就像這樣。

怎麼弄？有沒有一個過濾器的方法來做到這一點？ 這裏是我的代碼：

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

    myApp.controller('count', function($scope) { 
     $scope.digital = 849; 
     $scope.total = 105631466; 
    }); 

HTML：

<div class="container" ng-app="myApp"> 
    <div class="content" ng-controller="count"> 
     <span class"firstDigit">{{digital}}</span><!-- only first digit(8) --> 
     <span class"secondDigit">{{digital}}</span> <!-- only second digit(4) --> 
     <span class"thridDigit">{{digital}}</span> <!-- only third digit(9) --> 
     <span>{{total}}</span> <!-- need to show like 75,688,6497 (adding commas) --> 
    </div> 
</div> 

jsfiddle

Answer 1

可以轉換$scope.digital到n陣列使用$scope.digitalArray = $scope.digital.toString().split('');

然後使用ng-repeat來遍歷新陣列。

這使它所以你可以有整數的任何長度和他們都將出現

使用{{total | number}}將與你一樣逗號格式化的JavaScript

被lookoing爲

JSFiddle

var myApp = angular.module('myApp', []); myApp.controller('count', function($scope) { $scope.digital = 849; //Could also use $scope.digitalArray = $scope.digital.toString(); //But I think it's better for learning purposes to split it into an array $scope.digitalArray = $scope.digital.toString().split(''); $scope.total = 105631466; }); 

HTML

<div class="container" ng-app="myApp"> 
    <div class="content" ng-controller="count"> 
     <div ng-repeat="n in digitalArray"> 
      <span>{{n}}</span><!-- only first digit(8) --> 
     </div> 
     <span>{{total | number}}</span> <!-- need to show like 75,688,6497 (adding commas) --> 
    </div> 
</div> 

Answer 2

在JavaScript中，你可以做到以下幾點：

var digits = (""+$scope.digital).split(""); 

這會給你一個數組然後你可以迭代每個數字。

Answer 3

我覺得這是數學的解決方案，但是......你可以使用功能，如：

$scope.extactNumber = function(number, pos){ 
    return (number + "").substring(pos, pos + 1) 
} 

希望這有助於

Answer 4

你可以做這樣的事情：

$scope.split = function(num) { 
    return (''+num).split(''); 
}; 

這將採用num的數字，將其轉換爲字符串，然後將該字符串轉換爲數組，每個項目都是數字。然後，要訪問數字，只需使用普通數組訪問器，如下所示。

在HTML：

<span>{{split(digital)[0]}}</span> <!-- your first digit --> 
<span>{{split(digital)[1]}}</span> <!-- your second digit, etc. --> 

更重要的是，以減少你打電話分裂的次數，你可以把每個個體數到一個數組，首先，後來只是訪問它們：

myApp.controller('count', function($scope) { 
    $scope.digital = split(849); 
    $scope.total = split(105631466); 
}); 

function split(num) { 
    return (''+num).split(''); 
} 

然後在你的HTML：

<span>{{digital[0]}}</span> <!-- your first digit --> 
<span>{{digital[1]}}</span> <!-- your second digit, etc. --> 

Answer 5

要格式化總爲一個數字，你可以這樣做：

<span>{{ total | number }}</span>

有關格式化數字的更多文檔與角度看https://docs.angularjs.org/api/ng/filter/number。

要拆分整數，最有意義的是將其轉換爲控制器中的字符串並一次訪問索引。

在控制器：

$scope.digits = $scope.digital.toString();

然後更新您的HTML單獨訪問每個索引：

<div class="container" ng-app="myApp"> 
    <div class="content" ng-controller="count"> 
     <span class"firstDigit">{{digits[0]}}</span><!-- only first digit(8) --> 
     <span class"secondDigit">{{digits[1]}}</span> <!-- only first digit(4) --> 
     <span class"thridDigit">{{digits[2]}}</span> <!-- only first digit(9) --> 
     <span>{{ total | number }}</span> <!-- need to show like 75,688,6497 (adding commas) --> 
    </div> 
</div> 

Answer 6

您可以使用指令這個任務，這樣做只是像這個。

JS

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

myApp.controller('count', function($scope) { 
    $scope.digital = 849; 
    $scope.total = 105631466; 
}); 

myApp.directive('myDigitsDirective', function() { 
    function link(scope, element, attrs) { 
     scope.chars = scope.digits.toString().split(''); 
    } 

    return { 
     template: '<span ng-repeat="char in chars track by $index" ng-class="digit-{{$index}}">{{char}}</span><span>{{total}}</span>', 
     link: link, 
     scope: { 
      digits: '=myDigitsDirective', 
      total: '=total' 
     } 
    }; 
}); 

HTML

<div class="container" ng-app="myApp"> 
    <div class="content" ng-controller="count"> 
     <div my-digits-directive="digital" total="total"></div> 
    </div> 
</div> 

JSFiddle