It's possible to make for exmple :
<p>{{data.country}}</p> print out Country:New York, how to alter that to Country:NY ?
-
1fyi i've never heard of the country new york.Daniel A. White– Daniel A. White2015-06-20 12:32:22 +00:00Commented Jun 20, 2015 at 12:32
-
do you have the mapping from the full name to abbreviation?Daniel A. White– Daniel A. White2015-06-20 12:32:41 +00:00Commented Jun 20, 2015 at 12:32
-
@DanielA.White I don't need that, I just need a simple string alter in the view.Aaron Musktin– Aaron Musktin2015-06-20 12:34:36 +00:00Commented Jun 20, 2015 at 12:34
-
@AaronMusktin I think the way you want..I had implemented in the same way.. :)Pankaj Parkar– Pankaj Parkar2015-06-20 13:14:09 +00:00Commented Jun 20, 2015 at 13:14
Add a comment
|
4 Answers
You could do it using Regx .match and strings join method.
Markup
{{data.country.match(pattern).join('')}}
Controller
app.controller('MainCtrl', function($scope, $http) {
$scope.data = {};
$scope.data.country = 'New York';
$scope.pattern = /\b(\w)/g;
});
3 Comments
Aaron Musktin
ah this is way too complicated.
Walter Chapilliquen - wZVanG
But the solution of pankajparkar, is better
Pankaj Parkar
@AaronMusktin I don't think so its hard..If you want to increase its readability then you could move this code to custom filter as wZVang did..
Create a custom filter:
.filter("countryCaps", function(){
return function(country){
return "Country: " + country.match(/[A-Z]/g).join("")
}
})
<p>{{data.country | countryCaps}}</p>
answered Jun 20, 2015 at 12:50
Walter Chapilliquen - wZVanG
12.1k8 gold badges44 silver badges64 bronze badges
Comments
Always remember that what you have inside the {{...}} is an AngularJS expression. That means you can call functions as well.
Just put a function on your scope like this:
$scope.countryTranslator = function (country) {
if (country === 'New York') {
return 'NY';
}
};
and call it like this instead:
{{ countryTranslator(data.country) }}.
Obviously your "translator" should have better code than my example, but you get the idea.
2 Comments
outoftime
This is bad idea, to use $scope and storage for your custom functions accessible from templates. Read github.com/johnpapa/angular-styleguide
John Munsch
That is certainly one person's opinion of a bad idea. I have read his guide and there are certainly areas where there is some room for opinion. For example, embedding all your components in immediately executed functions? Or controllerAs with vm?
You should use custom filter for this purpose.
But you still have a problem with database of cities full name and they shortcuts, for this purpose, you can use static json file, or use side server service in your choice.
4 Comments
Daniel A. White
Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
Aaron Musktin
Custom filter is one of the way to do it, I'm asking it's possible to do it with view, I know how to achieve that in the model layer too.
outoftime
@AaronMusktin don't do that, really. View should present info not to alter it, you should format it in any way in model. I guess you should read code style too github.com/johnpapa/angular-styleguide
outoftime
@DanielA.White everything matters, he could not use filters if he didn't read that article. Should I copy paste full article there?