I'm currently using ngMask to handle masking for user input. It works great, but, AFAIK, can only be used on input elements. I now need to mask this same data for display. For example, in a table, I would hope to display item.ssn = 123456789 as 123-45-6798.
What is the best way to do this? I understand I can make custom filters, but was wondering if there was a generic way to do this for all text. Like this if you could extend the ngMask functionality...
<td><span mask="999-99-9999">{{item.ssn}}</span></td>
or as a filter...
<td>{{item.ssn|filter:'999-99-9999'}}</td>
You need to implement a filter. You can rely on MaskService provided with ngMask:
angular.module('myModule').filter('mask', ['MaskService', function(MaskService) {
return function(text, mask) {
var result,
maskService = MaskService.create(),
if (!angular.isObject(mask)) {
mask = { mask: mask }
}
maskService.generateRegex(mask).then(function() {
result = maskService.getViewValue(text).withDivisors()
}
return result;
}
}])
Then:
<td>{{item.ssn | mask:'999-99-9999'}}</td>
Take a look at date filter. you pretty much need to implement the same but for strings. You can use source code for reference.
In the simplest case you can just use simple regex replace:
angular.module('myModule').filter('ssn', function() {
return function(text) {
return (""+text).replace(/(\d\d\d)(\d\d)(\d\d\d\d)/, '$1-$2-$3');
}
})
<td>{{item.ssn|ssn}}</td>
Works for me. Follow.
https://github.com/alairjt/displayMask
<span>{{'01234567890' | mask:'999.999.999-99'}}</span>
//012.345.678-90
Just use AngularJS
{{youdate | date : "dd.MM.y"}}
reference: https://docs.angularjs.org/api/ng/filter/date
Related
Say I have a custom filter like so:
app.filter('custom', function () {
return function (input, search) {
const ret = {};
// find matches in input, given search
ret[key] = input[key] // etc etc
return ret;
});
here is the HTML, that works with the filter:
<div class="row" ng-repeat="(promptId, q) in myHash | custom:searchText">
what I believe I need to do, is set myHash in the controller to the ret value from the custom filter?
Is that the right thing to do, if so, how can I do that?
In other words, should I do something like this:
app.filter('custom', function ($scope) {
return function (input, search) {
const ret = {};
// find matches in input, given search
ret[key] = input[key] // etc etc
return $scope.myHash = ret; // do not do this LOL
});
"[What] I believe I need to do, is set myHash in the controller to the ret value from the custom filter?"
No, that would be wrong. A filter should not modify its input. It should produce a new value derived from the input (that is, its function parameters).
From the AngularJS documentation on filters (emphasis added by me):
"The filter function should be a pure function, which means that it should always return the same result given the same input arguments and should not affect external state."
As far as I can see, you're already doing it the right way (in your first code example).
Surprisingly, the following worked.
before:
<div class="row" ng-repeat="(promptId, q) in myHash | custom:searchText">
after:
<div class="row" ng-repeat="(promptId, q) in (myFilteredHash = (myHash | custom:searchText))">
So now, I have a second variable in my controller's $scope called myFilteredHash.
You could probably pass the $scope to the filter and then set myFilteredHash to the result.
I think the only thing you shouldn't do, is set the original value to the filtered value, because then you basically lose all your data! On top of that, you might set yourself up for an (infinite) digest loop.
if (isset($_REQUEST["$something"])) {
$user["$something"] = $_REQUEST["$something"];
}
Need to change the variable name for use in class.
Easy way?
I didn't figure out your question. Maybe do you want pick up the value from resquest and put in your Array ?
if (isset($_REQUEST["something"])) {
$user["something"] = $_REQUEST["something"];
}
I wrote an app to convert between decimal values and negabinary.
http://dev.golightlyplus.com/playground/negabinary/
I wrote a custom filter so I could do
{{decimal | negabinary}}
The code for it being..
var negabinaryApp = angular.module('negabinaryApp', []);
negabinaryApp.filter('negabinary', function() {
return function (decimal) {
if (isNaN(decimal)) return "not a number";
var negabinary = [];
var base = -2;
var remainder;
while(decimal != 0) {
remainder = decimal % base;
decimal = Math.ceil(decimal / base);
negabinary.push(remainder >= 0 ? remainder : -remainder);
}
return negabinary.reverse().join('');
}
});
What I'd like to be able to do is to also show the calculations on the page.
I could create an array of the calculations for each cycle through the while loop. But how do I then bind them to the HTML? Or is there a better way to go about this?
Thanks.
The actual functionality of your particular filter is distracting from the purpose of the question. To simplify, your question is: "how can I display that output of a filter that takes a string, and parses it into HTML"?
This would apply equally to your case as it would to a case where you just wrap the text in <pre>, for example.
The key, is to bind the output to ng-bind-html:
<div ng-bind-html="decimal | negabinary">
Here's a simple (and useless) example:
.filter("strongify", function(){
return function(str){
return "<strong>" + str + "</strong>";
}
});
which can be used similarly:
<div ng-bind-html="name | strongify">
Here's a plunker that breaks the text into paragraphs of <p>: http://plnkr.co/edit/RN5TqwNRRjMjynwInNyn?p=preview
Note, that you will also need to add ngSanitize dependency or otherwise do $sce.trustAsHtml on the output.
im taking first steps in angular, and i need to return array excluding empty spaces in it. i was able to create function to return the array i want, spliced, but couldn't find a way to make sure each cell in the array contains a value.
this is my function:
$scope.letters = function(arr) {
var lettersarray = arr.split('');
return lettersarray;
};
is there a way to do it in angular?
i know a way in jquery but understood its not recommended to mix both so im looking for an "angularish" way to do it..thx
There's no real "Angular" way to do it, why not just use native JS and .map
function trimArraySpaces(arr) {
return arr.map(function(item) {
return item.trim();
});
}
var testArr = ["John ", "Sally "],
trimmedArr = trimArraySpaces(testArr); //["John", "Sally"]
As part of a xtype combo, I would like to know if the layer I choose in my simple data store (represented by this.getValue()) is present in the map layers. So if it does, A should occur, and B if it does not. The problem is that myLayer variable seems to be unrecognized, even though Opera Dragonify throws no error at all. Where would be the error?
listeners: {
'select': function(combo, record) {
for(var i = 0; i < mapPanel.map.length; i++) {
var myLayer = mapPanel.map.layers[i].name;
if (myLayer == this.getValue()) {
// do A here...
} else {
// do B here...
}
}
}
}
Thanks for any pointers,
I think the problem is that you are using this.getValue() instead of using combo.getValue().
I don't know how your app is set but it's usually a better idea to use the first parameter of your listener instead of the keywork this in order to avoid scope issues.
Hope this helps
#Guilherme Lopes Thanks for that, but the solution was this: mapPanel.map.layers.length instead of mapPanel.map.length.