如何使用$ filter和angular.js中的select

如何根據用戶選擇的值在不同的過濾器之間切換？我有三個過濾器（'largeNumber'，'Percentage'，'Bytes'），我想根據用戶選擇的值在這些過濾器之間切換。現在我使用的過濾器從我的js代碼見小提琴然而由於預期jsfiddle:

預期輸出

選擇了1200的用戶類型，當大數它不工作==>1K

視圖

<div ng-controller="MyCtrl"> 
    <form role="form" class="form-inline"> 
    <div class="form-group"> 
    <input type="text" class="form-control" id="sample" ng-model="numberData" placeholder="Enter Number"> 
       <select class="form-control inline" id="format" ng-model="numberType" 
        ng-options='type for type in selectType' ng-change="selected()"> 
        <option style="display:none" value="" class='formOptions'>select a type</option> 
       </select> 
    </div> 

</form> 
<h1> data here: {{numberData}}</h1> 
</div>

的jsç頌：

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

myApp.filter('largeNumber', function(){ 
    return function(number, decPlaces) { 
    var orig = number; 
    var dec = decPlaces; 
    // 2 decimal places => 100, 3 => 1000, etc 
    decPlaces = Math.pow(10, decPlaces); 

    // Enumerate number abbreviations 
    var abbrev = ["k", "m", "b", "t"]; 

    // Go through the array backwards, so we do the largest first 
    for (var i = abbrev.length - 1; i >= 0; i--) { 

     // Convert array index to "1000", "1000000", etc 
     var size = Math.pow(10, (i + 1) * 3); 

     // If the number is bigger or equal do the abbreviation 
     if(size <= Math.abs(Math.round(number))) { 
      // Here, we multiply by decPlaces, round, and then divide by decPlaces. 
      // This gives us nice rounding to a particular decimal place. 
      var number = Math.round(number * decPlaces/size)/decPlaces; 

      // Handle special case where we round up to the next abbreviation 
      if((number == 1000) && (i < abbrev.length - 1)) { 
       number = 1; 
       i++; 
      } 

      // console.log(number); 
      // Add the letter for the abbreviation 
      number += abbrev[i]; 

      // We are done... stop 
      break; 
     } 
    } 

    return number; 
} 

    }) 


function MyCtrl($scope, $filter) { 
     $scope.selectType = ['Large Number', 'Percentage', 'Bytes'] 

    $scope.selected = function() { 
    console.log($scope.numberType) 
    return $scope.numberType 

    }; 

    $scope.selectedType = $scope.selected() 

$scope.sendSelectedItem = function(){ 
    if($scope.selectedType == "Large Number"){ 
    return $filter('largeNumber')(0) 
    } 

} 
}

來源

2016-08-15 Imo

發生了什麼，我錯過了這裏的一點...當用戶類型1200應該下拉顯示largeNumbers？ – Thalaivar

如果用戶輸入1200並從下拉列表中選擇大數字，那麼過濾器應該適用 – Imo

它應該在哪裏應用......我的意思是在一個新的div區域？ – Thalaivar

HTML變化：

<h1> data here: {{numberDataFormatted}} </h1>

腳本更改：下面的代碼是你的控制器需要。

$scope.selectType = ['Large Number', 'Percentage', 'Bytes']; 

$scope.sendSelectedItem = function() { 
    if ($scope.numberType == "Large Number") { 
    return $filter('largeNumber')($scope.numberData, 0); 
    } 
    // Handle other types or defaults here 
} 

$scope.selected = function() { 
    $scope.numberDataFormatted = $scope.sendSelectedItem(); 
}; 

// Set the initial type 
$scope.numberType = "Large Number";

與您的代碼的問題：

$ scope.sendSelectedItem定義，但不被調用。當選擇一個項目並選擇時，應該調用，您可以應用所需的過濾器並將結果分配給另一個範圍模型變量。
$ scope.numberData是一個未格式化的值。如果將其分配給h1標籤而不應用過濾器，則只會顯示輸入字段中輸入的值。

希望這會有所幫助。

來源

2016-08-15 11:55:04 Sarathy

如何使用$ filter和angular.js中的select

回答

相關問題