Wie $ Filter mit Select in angular.js verwenden

Question

Wie kann ich zwischen verschiedenen Filtern basierend auf den vom Benutzer ausgewählten Werten wechseln? Ich habe drei Filter ("largeNumber", "Percentage", "Bytes") und ich möchte zwischen diesen Filtern basierend auf dem vom Benutzer ausgewählten Wert wechseln. Im Moment bin ich mit Filter aus meinem js Code sehen Geige aber es ist nicht so jsfiddle:

erwartete Ausgabe

, wenn der Benutzer in 1200 und ausgewählten große Zahlen erwartet funktioniert ==>1k

Ansicht

<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 c Ode:

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) 
    } 

} 
} 

Answer 1

HTML Änderungen:

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

Script Änderungen: Der folgende Code ist alles, was Sie in der Steuerung benötigen.

$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"; 

Probleme mit Ihrem Code:

1. $ scope.sendSelectedItem definiert, aber nicht aufgerufen. Das sollte aufgerufen haben, wenn ein Element ausgewählt ist, und bei Auswahl können Sie den erforderlichen Filter anwenden und das Ergebnis einer anderen Bereichsmodellvariable zuweisen.

2. $ scope.numberData ist ein unformatierter Wert. Wenn Sie es dem h1-Tag zuweisen, ohne einen Filter anzuwenden, wird nur der Wert angezeigt, der im Eingabefeld eingegeben wurde.

Hoffe, das hilft.