I've build a simple component that allows passing a filter as a parameter, and I'm trying to use that parameter in the component view, but I don't know how. It gets passed as a string so it's treated as a string in the component view and thus not working.
Basically it looks something like this:
<number-compare value="some.value" filter="currency"/>
And in the component view:
<span> {{ numCompCtrl.value | numCompCtrl.value.filter }} </span>
But that doesn't work because it gets interpreted as {{ 10 | "currency" }}
I've tried to handle it in the controller instead, and apply the filter there but it gets really messy when the filter needs multiple parameters so the easiest thing by far would be if I could get the simple way working.
Is it possible?
Actually, I just discovered that I had already solved this previously with another filter as a workaround 🙈
(function() {
'use strict';
angular
.module('core')
.filter('dynamic', dynamic);
dynamic.$inject = ['$interpolate'];
function dynamic($interpolate) {
return function(value, name) {
if (!name) {
return value;
}
var result = $interpolate('{{ value | ' + name + ' }}');
return result({ value: value });
};
}
})();
And used like this:
{{ numCompCtrl.value | dynamic: numCompCtrl.value.filter }}
Related
I have a JSON which provides me a user's working experiences info. But country and city's are provided in a code format (TR,DE etc.)
I am using ng-repeat to pass them into html like this
<div ng-repeat="e in experiences">
<span>{{e.Name}}</span>
<span ng-init="changeCodeToFullName(e.Country)">{{vm.CountryFullName[$index]}}</span>
</div>
I am using ng-init to convert Country Code to full name. changeCodeToFullName is an angular service written by me, Is this a correct method? If it is, I can't access the dom to change CountryFullName value. I tried to access them in JS file like vm.CountryFullName[0]="TEST" but it didn't worked. I need to use e.Country variable after, therefore I can't change the original .e.Country value.
How can I access a variable inside of ng-repeat after ng-repeat completed?
How about using a custom filter:
<div ng-repeat="e in experiences">
<span>{{e.Name}}</span>
<span>{{e.Country | changeCodeToFullName}}</span>
</div>
angular.module('App').filter('changeCodeToFullName', function(YourService) {
return function(country) {
return YourService.getFullCountryName(country)
}
})
Here's an example: http://codepen.io/rustydev/pen/YWyqJB
This is one way of doing it - but this ngInit value won't be reparsed if the list updates. Why not just format the data in the JSON request response - such as:
$http.get("json.json").success(function(data) {
$scope.exeriences = data.map(function(obj) {
//Format results;
if (obj.Country == "DE") {
obj.Country = "Germany"; //etc
}
return obj;
});
});
I'm using a filter to calculate values, but then I want to access them later on.
Here's a snippet of my code:
app.controller('CreateProposalCtrl', function() {
$scope.EstimatedCostItem = [];
});
-
app.filter('EstimatedValue', function() {
return function(input, arguments) {
...blah blah calculations
return calculations;
};
});
I'm not sure how the HTML should be presented.
This displays exactly what I want..BUT I need it to set a variable so I can access it somewhere else..
<span ng-repeat="foo in bar">
{{ Type.JobTypeID | EstimatedValue: form }}
</span>
I've tried:
<span ng-model="EstimatedCostItem[Type.JobTypeID]" ng-bind="Type.JobTypeID | EstimatedValue: form"></span>
And:
<span ng-bind="EstimatedCostItem[Type.JobTypeID]">{{ Type.JobTypeID | EstimatedValue: form }}</span>
And:
<span ng-init="EstimatedCostItem[Type.JobTypeID] = (Type.JobTypeID | EstimatedValue: form)"></span>
Nothing seems to set a variable. I'm stumped :(
The filter syntax only works within specific Angular expressions. Expressions that use plain JavaScript cannot use the foo | bar filter syntax, as it's not valid JavaScript.
What you could do is use $filter:
var value = $filter('EstimatedValue')(foo);
Remember to inject $filter into your controller.
With that said, this probably isn't the best use of a filter. Why not create a scope function that calculates and stores the value? Something like:
$scope.EstimatedValue = function(foo) {
var value = doSomeCalculations();
// store for usage elsewhere
this.estimatedValuesCache[foo] = val;
return val;
};
I'm new to AngularJS and trying to create a simple app that will allow me to upload files to my Laravel driven website. I want the form to show me the preview of what the uploaded item will look like. So I am using ng-model to achieve this and I have stumbled upon the following:
I have an input with some basic bootstrap stylings and I am using custom brackets for AngularJS templating (because as I mentioned, I am using Laravel with its blading system). And I need to remove spaces from the input (as I type it) and replace them with dashes:
<div class="form-group"><input type="text" plaeholder="Title" name="title" class="form-control" ng-model="gnTitle" /></div>
And then I have this:
<a ng-href="/art/[[gnTitle | spaceless]]" target="_blank">[[gnTitle | lowercase]]</a>
And my app.js looks like this:
var app = angular.module('neoperdition',[]);
app.config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
app.filter('spaceless',function(){
return function(input){
input.replace(' ','-');
}
});
I get the following error:
TypeError: Cannot read property 'replace' of undefined
I understand that I need to define the value before I filter it, but I'm not sure where to define it exactly. And also, if I define it, I don't want it to change my placeholder.
There are few things missing in your filter. First of all you need to return new string. Secondary, regular expression is not correct, you should use global modifier in order to replace all space characters. Finally you also need to check if the string is defined, because initially model value can be undefined, so .replace on undefined will throw error.
All together:
app.filter('spaceless',function() {
return function(input) {
if (input) {
return input.replace(/\s+/g, '-');
}
}
});
Demo: http://plnkr.co/edit/5Rd1SLjvNI18MDpSEP0a?p=preview
Bravi just try this filter
for eaxample {{X | replaceSpaceToDash}}
app.filter('replaceSpaceToDash', function(){
var replaceSpaceToDash= function( input ){
var words = input.split( ' ' );
for ( var i = 0, len = words.length; i < len; i++ )
words[i] = words[i].charAt( 0 ) + words[i].slice( 1 );
return words.join( '-' );
};
return replaceSpaceToDash;
});
First, you have to inject your filter in you module by adding it's name to the array :
var app = angular.module('neoperdition',['spaceless']);
Secondly, the function of the filter have to return something. The String.prototype.replace() return a new String. so you have to return it :
app.filter('spaceless',function(){
return function(input){
return input.replace(' ','-');
}
});
Edit: dfsq's answer being a lot more accurate than mine.
I have a simple string array coming from a server:
[{"things":["me", "my"]}]
In my page, to display the array I have:
{{things}}
And it prints:
["me", "my"]
How do I control the printing, for instance, if I want to eliminate the brackets and quotes?
You can implement a scope function to display arrays as comma separated strings like shown in this fiddle.
$scope.array = ["tes","1","2","bla"];
$scope.arrayToString = function(string){
return string.join(", ");
};
Now you can call this function within the template:
{{arrayToString(array)}}
Update
You can also use the join() method of arrays directly within the template without using an extra function inbetween as displayed within the updated fiddle.
{{array.join(", ")}}
I think you'll want ngRepeat for something like:
<div class="list" ng-repeat="thing in things">
{{ thing }}
</div>
You can also create custom angular filter optionally with some advanced formatting:
module.filter('formatArray', ['OptionalInjection', function(OptionalInjection) {
return function(value) {
if (!angular.isArray(value)) return '';
return value.map(OptionalInjection.formatter).join(', '); // or just return value.join(', ');
};
}])
Then in html just write {{yourArrayValue | formatArray}}.
I'm currently working on a project using angular-translate. The goal for me is to create a translation map which allows a developer to change an object model without breaking the translation.
For example, say I have an order saved inside my scope:
$scope.order = {
numberOfItems: 5,
// ...
};
And a translation map with a property displaying the number of items:
var translationsEN = {
itemsNumber: "{{numberOfitems}} item(s)",
// ...
};
var translationsFR = {
itemsNumber: "{{numberOfItems}} article(s)",
// ...
};
With this map, I could easily do this:
{{'itemsNumber' | translate:order}}
But if a developer would like to change the name of the numberOfItems property, he will have to change the translation map too, which is pretty fastidious... So, I've changed my translation map for this:
var translationsEN = {
itemsNumber: "{{number}} item(s)",
// ...
};
var translationsFR = {
itemsNumber: "{{number}} article(s)",
// ...
};
Now, a developer just have to transmit a simple object with the necessary values, like this:
<span translate="order.misc.itemsNumber"
translate-values="{ number:{{order.numberOfItems}} }">
</span>
But, as you can see, I'm no longer using filters but directives. I can't find any way to do something like this:
{{'order.misc.itemsNumber' | translate:'{ number:{{order.numberOfItems}} }'}}
This doesn't work either:
{{'order.misc.itemsNumber' | translate:'{ number:order.numberOfItems }'}}
Is there any solution allowing me to use filters or should I just use directives?
Try without the quotes:
{{'order.misc.itemsNumber' | translate: {number: order.numberOfItems}}}