I have a form that I want to get from the template cache as string:
<script type="text/ng-template" id="info.html">
<p> {{ 'COMMON.NAME' | translate }} </p>
</script>
When I call $templateCache.get('info.html') I get the untranslated string of the template above:
<p> {{ 'COMMON.NAME' | translate }} </p>
What I want to get is the translated version which looks like this:
<p> name </p>
Is there any way to do that with templateCache?
You need to use ngBindHtml
$scope.commonName = $templateCache.get('info.html')
Then in the view:
<p ng-bind-html="commonName | translate"></p>
It is important that you add angular-sanitize to your project and inject it to your app module.
angular.module('app', ['ngSanitize'])
Related
I am working on a small AngularJS application. In one of the views, I have replaced some hard-coded html with data coming from a JSON file that I iterate through:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction('{{item.action}}')">
{{item.name | translate }}
</div>
</div>
The problem is that, since this replacement, the function fired by ng-click, that used to be (hard-coded) ng-click="$ctrl.selectAction('register'); and so on, does not work anymore.
Why does that happen? How can I fix the problem?
You don't need quotes or {{ }} inside ng-click:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction(item.action)">
{{item.name | translate }}
</div>
I'm using AngularJS linky filter to make links on a snippet, and it works great, but I want to make call a custom function before executing the url.
So my question is, how can i set a ng-click attribute with linky filter ?
Hope it makes sense?
my code looks like:
<div class="item" href="#" ng-repeat="message in messages">
<p class="message" ng-bind-html="message.message | linky:'_blank':open(url)"></p>
</div>
Following on from gtlambert's comment, it should work. I've used it before. If you add the following, it will run the alert first, and the proceed to follow the link:
HTML
<p class="message" ng-bind-html="message.message | linky:'_blank':open(url)" ng-click="alertFunc()"></p>
</div>
JS
$scope.alertFunc = function() {
alert("doSomething");
}
This does not seem possible, but is it:
<div ng-repeat="item in myitems | {{ searchfilter }}">
<span>{{ item.title }}</span>
</div>
or some variant of it? All I get are no results.
searchfilter should not have {{ }} around it. Since this is a directive, angular knows how to deal with the variable. You only need the braces when trying to inject a variable from angular scope into the non-angular HTML.
You should correct syntax to this instead:
<div ng-repeat="item in myitems | filter:searchfilter">
With Search filter Moustaches :<span>{{ item.title }}</span>
</div>
Have created a small plunk for reference.
http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview
Ok, here you go guys.
I am learning Angular and wondering how to order items (array of strings). I know that there are different ways using controller etc, but I am just starting to learn it from today.
Was wondering if there is a way to orderBy on names? I know orderBy can be applied to a property name in array of objects if we have, but placing it in ng-repeat.
But how to achieve it in my code below?
EDIT: I need the orderby both on initial display on page load, as well as when the user types something in the textbox when it filters.
<html data-ng-app="">
<head>
<title></title>
</head>
<body data-ng-init="names=['Sita','Ram', 'Amit','Cat','Boushick' ] ">
<input type="text" name="txtName" data-ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul |orderBy:'names' >
<li data-ng-repeat="personName in names | filter:typedName "> {{ personName | uppercase}}
</li>
</ul>
<script src="Scripts/angular.min.js"></script>
</body>
</html>
yes use orderBy as ,
<li data-ng-repeat="personName in names | orderBy:personName | filter:typedName "> ...
here is the Demo Plunker
Use orderBy:'toString()' before filter :)
<li data-ng-repeat="personName in names | orderBy:'toString()'|filter:typedName "> {{ personName | uppercase}}
Here is Plunker
I am using Angular Bootstrap's typehead, which provides an attribute: typeahead-template-url, which can be used to set a custom HTML template to display the typehead items. In the example, this is set as: customTemplate.html in HTML and the template is created as so:
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
Can I define this template in my main JavaScript file, as opposed to creating a script tag for it, as above?
I am looking for something like:
HTML:
<input typehead=".." typeahead-template-url="tpl.html" />
JS:
Angular.setTemplate( 'tpl.html', '{{item.name}}' )