[英]How to use $filter with select in angular.js
How can I toggle between diffrent filters based on the values selected by the user? 如何根据用户选择的值在不同的滤镜之间切换? I have three filters ('largeNumber', 'Percentage', 'Bytes') and I want to toggle between these filters based on the value selected by the user. 我有三个过滤器(“ largeNumber”,“ Percentage”,“ Bytes”),我想根据用户选择的值在这些过滤器之间切换。 Right now I am using filter from my js code see fiddle however it does not work as expected jsfiddle: 现在,我正在使用我的js代码中的过滤器,请参见小提琴,但是它无法按预期的效果运行:
expected output 预期产量
when the user types in 1200 and selected Large Numbers ==> 1k 当用户键入1200并选择大数==> 1k时
view 视图
<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 code: 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)
}
}
}
HTML changes: HTML更改:
<h1> data here: {{numberDataFormatted}} </h1>
Script Changes: The following code is all you need in the controller. 脚本更改:以下代码是控制器中所需的全部内容。
$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";
Problems with your code: 您的代码有问题:
$scope.sendSelectedItem is defined but not invoked. $ scope.sendSelectedItem已定义但未调用。 That should have been invoked when an item is selected and on selection, you can apply the required filter and assign the result to another scope model variable. 当选择一个项目时,应该已经调用了该方法,并且在选择后,您可以应用所需的过滤器并将结果分配给另一个作用域模型变量。
$scope.numberData is an unformatted value. $ scope.numberData是未格式化的值。 If you assign it to the h1 tag without applying a filter, it will just display the value entered in the input field. 如果将其分配给h1标签而不应用过滤器,它将仅显示在输入字段中输入的值。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.