I want to decorate some sensitive data with MouseStats comments.
Currently i'm doing it like that:
<td><!-- StartMouseStatsHide -->{{ $ctrl.payerName }}<!-- EndMouseStatsHide --></td>
but there are plenty of sensitive data in many places of interface, so i tried to use a filter to decorate the value
<td>{{ $ctrl.payerName|mousestats_hide }}</td>
Filter simply surrounds value with comments.
The problem is that in that way comments are being escaped to entities.
What do you suggest?
Is it possible to do it using filters?
Is it possible to do it using filters?
Yes it is possible to prepend/append a variable using angular filters.
The problem is that in that way comments are being escaped to entities..
That is because you are directly interpolating the variable in scope with {{ $ctrl.payerName }}. It does not parse HTML tags and show the resultant string as is.
You need ng-bind-html directive to prevent the comments being escaped to entities, if you want to add HTML comments around given values.
So rather than doing
<td>{{ $ctrl.payerName|mousestats_hide }}</td>
You should do
<td ng-bind-html="$ctrl.payerName|mousestats_hide"></td>
Here's the working demo which generates the following markup.
(I'm not much of a fan of <table> so just replaced <td> with a <span>)
<body ng-controller="MainCtrl" class="ng-scope">
<span>Payer Name is: </span>
<span ng-bind-html="payerName |mousestats_hide" class="ng-binding">
<!-- StartMouseStatsHide -->Jakub Filipczyk<!-- EndMouseStatsHide -->
</span>
</body>
Noticed the use of $sce service I injected in filter ?
It is to prevent [$sce:unsafe] error that makes angular believe someone is attempting to use an unsafe value in a safe context.
Hope it helped!
Related
I am displaying Errors on my Html page using Angular JS. The problem is I am receiving only error codes from the HTML . What are the various ways in which i can change the error code to the the Error text i like
<table>
<tr ng-repeat='item in errorsd'>
<td align="left" class="validationMsg"> {{item.message}}</td></tr>
</table>
If my item.message has one . I would like to display Beginner ,if its 2 Intermediate like that and so on . Should i use ng-if ? should i use ng-switch or should i input some logic on the controller side .
Should i use ng-if ?
ng-switch is more readable and hence a better option. Later when you look back at the code it will be intuitive to you and other developers about what this code does.
should i input some logic on the controller side .
Why put a logic in controller-side if the framework already provides a solution for such use-case?
I would do it like:
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch="item.message" align="left" class="validationMsg">
<span ng-switch-when="1">Beginner</span>
<span ng-switch-when="2">Intermediate</span>
<!-- and so on.. -->
</td>
</tr>
</table>
I say use a switch statement inside of your controller.
So depending on the value, the global message would change thus displaying the correct one when triggering the validation msg box to show.
I am attempting to filter a table based on the value of an input box.
I have it currently working on the HTML side, like so...
<tr ng-repeat="person in model.info | filter:inputFilter" ..... >
<td> {{ person.name }} </td>
<td> {{ person.height }} </td>
</tr>
<input class="filterBox" type="text" ng-model="inputFilter">
As said before, it works swell. It filters as I type, and is very quick and snappy.
In an effort to make the code reusable, I'd really like to be able to convert this into a Javascript function, but the syntax is escaping me. Yes, I've read the documents, but am not sure how I could just have it update in real time like it does through the HTML side.
Thanks :D
Austin
How do I translate my angular app with minimal watch impact?
Here's what I'm thinking (but anything that meets the watch impact criteria I'm ears for) - is there an existing library that takes .html files as an input, extracts the strings that need to be translated into a template (ideally a .resx file, but any format with key/value/comment can be converted into a resource file), which can be translated by hand/outsourcing, and then this same library takes the localized templates and original input .html files and generates localized .html files? That's the only way I can think to do localization without generating additional watches for each translated phrase. (Of course I can write this myself, but I make it a habit to prefer a community-supported solutions to my more-error-prone-by-myself-libraries.)
It's safe for me to assume that the user will not change his or her locale preference at run-time (being able to change languages at run time is the only advantage I see by having watches introduced by translating directives and filters in libraries like angular-translate and angular-gettext).
Having typed that out, a library could use interpolation and filters, have the localiztion specified in a .config() block and then have the watches fire only once. That would be acceptable.
Yes there is a library which can reduce the watch impact and that is bindonce and then you can find a demo at plunkr demo
The BindOnce can be used like this:
<tr bindonce ng-repeat="person in Persons" bo-class=" {'male':person.gender=='M','female':person.gender=='F'}">
<td bo-bind="$index + 1"></td>
<td><img bo-src="person.picture" /></td>
<td bo-bind="person.firstname"></td>
<td bo-bind="person.lastname"></td>
<!-- BAD PRACTICE FOR STYLE ON PURPOSE: Using a function as binder is not good -->
<td><span bo-bind="person.age" bo-style="ageColor(person.age)" style=""></span></td>
<td bo-bind="person.gender"></td>
<td>
<a bo-href="person.url">
<spam bo-bind="(person.url)?'link':'missing'" bo-class="{'label label-important':!person.url}"></spam>
</a>
</td>
</tr>
I am loading data from database in JSON Format, like this: ($scope.fees):
{"1_0":"2000","1_1":"1900","1_2":"1800","1_3":"1700","1_4":"1600","1_5":"1500","1_6":"1400","1_7":"1300","2_0":"4000","2_1":"3900","2_2":"0","2_3":"0","2_4":"0","2_5":"0","2_6":"0","2_7":"0"}
This needs to be displayed in a table (like grid), in which rows and columns are not fixed. This code works for me now:
<tbody data-ng-repeat="obj in courses"><!-- Courses JSON -->
<tr><th>{{obj.name}}</th></tr>
<tr data-ng-repeat="bat in obj.batches"><!-- Each course contains Batches -->
<td>{{bat.bname}}</td>
<td data-ng-repeat="obj in categories"><!-- Columns based on categories -->
<input type="text" name="{{bat.bid}}_{{obj.id}}" data-ng-model="fees.1_0" />
</td>
</tr>
data-ng-model="fees.1_0" should be actually as provided for the name attribute: data-ng-model="fees.{{bat.bid}}_{{obj.id}}" but this doesn't work. Is there any solution to get this working? Thanks in advance.
Edit: I can change the JSON format if there is a better solution to get this done. The current format is batch<underscore>category: fees
Try data-ng-model="fees[bat.bid + '_' + obj.id]"
Check this Demo. This shows how to attach model dynamically from JSON object.May this will help you.
Just like variable keys in javascript use [] in the ng-model as the as bracket value must be your object key
I'd like to use an AngularJS filter to search for a piece of text in a table and then use Angular-ui highlight to highlight the text.
I have the following code:
Search field:
<input type="text" ng-model="searchText"/>
Table with ng-repeat and angular-ui highlight
<table ng-repeat="fruit in fruits">
<tr>
<td>{{ fruit.name | highlight:searchText }}</td>
<td>{{ fruit.price }}</td>
</tr>
</table>
But my result looks like this:
I think I should be using ng-bind-html-unsafe, but am not sure of the correct way to implement it. Any ideas?
You can try
<span ng-bind-html-unsafe="fruit.name | highlight:searchText"></span>
I have solved my issue, with help from user sza.
I am using AngularJS 1.2, and need to be using ng-bind-html not ng-bind-html-unsafe. The next step was to include the angular-sanitize.js script. The last step was to include in the directive ngSanitize to app.js.
Source and additional reading here