i have used angular-translate, and it works great.
But now the problem is how can i use it in my controller functions?
normal we can use it in the html templates as {{ 'mystring' | translate }}
but i actualy want to do this:
function bla(){
var myvalue = 'mystring' | tranlate
return value;
}
and then in my html {{ value }}
As per Docs,to use filter inside controller is as follows.
$filter('filter')(array, expression, comparator)
You need to write something below
app.controller('MainCtr', ['$scope','$translate','$filter', function ($scope,$translate,$filter) {
$translate.use($scope.language.langCode);
$scope.data = $filter('translate')('Title');//where Title is language dependant
});]);
Demo to call filter inside controller
It seems you are trying to show dinamic content on your html. To achieve this you should think in other way to do it using angular-translate. I can guess you are trying to achieve this:
controller.js
$scope.mystring = 'MY_LITERAL_CODE';
inde.html
<span>{{ mystring | translate }}</span>
Related
And I have the following links in my page as following :
<li ng-repeat="o in villes | shuffle | limitTo:5">{{o.nomVille}}</li>
I want when I click on some link to call the searchByVille function and to log the parameter I passed to it as following :
$scope.search = function(id){
console.log(id);
}
which doesn't work.
How can I solve this ?
Omit the {{}} in your ngClick directive:
ng-click="searchByVille(o.codeVille)"
ngClick already takes an Angular expression - no need for them.
No need to evaluate using {{}}.
Use data-ng-click="searchByVille(o.codeVille)"
Angular $sce service seems to be encoding characters and not trusting the html. Is there an option to have the html trusted?
$scope.text = $sce.trustAsHtml('it's broken')
An example.
<p>it's working</p>
<p>{{ text }}</p>
Looks like.
it's working
it's broken
I'd rather not use ng-bind-html because it's meant to be used in a filter like the following.
{{ text | render }}
It is not the $sce that encode your html, actually nothing does that.
But when you use an interpolation {{ text }}, angular will detect that and replace it with a correct value via textNode.nodeValue, not something like innerHTML. Therefore, your ' will be treated as a normal text, not an encoded HTML entity.
That's why the ng-bind-html exists, and nothing prevent you from using the filter inside the ng-bind-html expression.
<div ng-bind-html="text | render | trustAsHtml"></div>
Example filters:
.filter('render', function () {
return function (value) {
return value + '!';
};
})
.filter('trustAsHtml', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
};
})
Example Plunker: http://plnkr.co/edit/F8OQvoSzOR06TPepc2Fo?p=preview
How can I check if an angular model is an array or an object? Is there a built in or do I have to write a filter isArray with Array.isArray()
{{[] | isArray}} doesn't work
You can use the angular.isArray function. It's built-in inside Angularjs.
If you want to use this function inside your template, you have to create a custom filter: http://docs.angularjs.org/tutorial/step_09
Example of what you want:
angular.module('...', []).filter('isArray', function() {
return function (input) {
return angular.isArray(input);
};
});
Then you can use the filter inside your template:
{{ myVar | isArray }}
I guess you can also add underscore/lodash to the rootScope and use it:
_ = require('lodash')
angular.module('app',[])
.run(function($rootScope){
$rootScope._ = _
})
And in the template:
<div ng-show="$root._.isArray(foo)">
<label> First element of Foo </label>
<span> {{ $root._.first(foo) }} </span>
</div>
The benefits - you have to add lodash only in one place, and it will be available everywhere. You can use many other things the same way, like Math functions for example. Just be reasonable and don't put too much javascript into expressions.
I have a my-edit directive that has a value attribute expecting a scope variable to bind to.
<my-edit value="myVar"></my-edit>
is there any way to do something like this:
<my-edit value="{{varName}}"></my-edit>
where varName = "myVar"
I want to nest this directive in "my-listbox" directive that has a "text-field" attribute
<my-listbox ng-model="myList" text-field="itemProp"></my-listbox>
So I was trying use a template like:
<div>
<ul>
<li ng-repeat="item in items">
<my-edit value="item.{{textField}}"></my-edit>
</li>
</ul>
</div>
But obviously it doesn't work
I guess using a text binding is also not the solution.
Is a dynamic generated template for "my-listbox" the way to go here?
I tried that in the compile function but the didn't work that well because of the nested neRepeat directive. Should it by done using $compile in link function?
Thanks
This is something pretty cool about angular, it evaluated the string that you pass to the directive. This means that you can actually just do value="item[textField]" and that will work.
For instance if you had a controller with data like this:
$scope.data = {
test: 'test_val',
other: 'other_val'
};
$scope.val = 'test';
You could just pass it like this to your directive:
<directive value="data[val]"></directive>
That is set up like this:
scope: {
value: '='
},
And the isolate scope will have scope.value = 'test_val' and will update to 'other_val' just by changing the original controller val to 'other'
I made a fiddle where this is set up for you to play with.
Hope this helps!
I'm using AngularJS and it's great.
I can't find it in the Documentation - What is the equivalent in Javascript to this AngularJS expression:
<div>{{ (myList| filter:mySearch).length }}</div>
Thanks for the help.
It's on Angular's filter documentation:
In HTML Template Binding
{{ filter_expression | filter:expression }}
In JavaScript
$filter('filter')(array, expression)
In your case, it would look something like $filter('filter')(myList, mySearch).
As an alternative syntax you can also inject a filter directly, without going through the $filter service. For example to inject filter filter to your controller you could write:
MyCtrl = function($scope, filterFilter) {
$scope.filtered = filterFilter(myArray, expression);
}
A question very similar to How to use a filter in a controller?
In your html
<input ng-model="search">
<div ng-repeat="thing in things | filter:searchResults"></div>
In your JS
$scope.$watch('search', function (newValue, oldValue) {
var searchResults = filterFilter($scope.things, $scope.search);
});