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
Related
I can't get the 'groupBy' working.
I have a data set returned from a $http factory. The data is passed to the $scope 'territoryReq' variable.
the data set looks like:
[{"Country":"Netherlands","Name":"firstName lastName","Phone":"+12345678","Mobile":"+987654321"},{"Country":"Netherlands","Name":"firstName2 lastName2","Phone":"+12345678","Mobile":"+987654321"}]
I have a simple 'dump' of the data by using:
<div>
<table ng-table="" class="table table-condensed table-bordered table-hover">
<tr class="ng-table-group" ng-repeat="entries in territoryReq">
<td>
{{entries.Country}}
</td>
<td>
{{entries.Name}}
</td>
<td>
{{entries.Phone}}
</td>
<td>
{{entries.Mobile}}
</td>
</tr>
</table>
</div>
This is all working. No problem.
Now I want to have the results grouped by Country. Preferably by being able to click on the country which then unhides the rows with the correct country.
I was looking at the example of example of ng-table with grouping
But I can't get it working for my data..
In the example they use e.g. group in $groups but I can't figure out where $groups come from?
Anyway, I hope someone can help me in the right direction...
thanks!
For straight up grouping, groupBy takes an object property as the parameter. It should be as simple as
<tr class="ng-table-group" ng-repeat="entries in territoryReq | groupBy: 'Country'">
But it sounds more like you want to filter the list based on criteria, like country.
I mocked this up to demonstrate what I think you're looking for. Please take a look and see if it helps... It has ordering via the table headers and filtering from a dynamic list of countries.
https://stackblitz.com/edit/angularjs-yvxdrd
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 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!
So I am getting some dynamic data and am able to get it to display, but I now want to add some pagination, I have seen that there are modules that can do this but with my limited experience with Angular I haven't been able to get one to work. Below is my table in my HTML, and basically in my Javascript I am running a REST POST call that returns the data and display it in the table below, however if I wanted to use pagination instead of displaying the whole table, how would I do so, I'm not trying to do anything fancy but I have tried some Jquery plugins in addition to the angularjs modules have not figured it out, I thought there may be a way to do this with a simple table like shown below, if anyone has any advice I'd appreciate it.
<table class="table table-striped">
<tr>
<th><b>ID</b></th>
<th><b>Score</b></th>
<th><b>Number</b></th>
</tr>
<tr ng-repeat="data in restCtrl.results">
<td>{{ data.id }}</td>
<td>{{ data.score }}</td>
<td>{{ data.number }}</td>
</tr>
</table>
You can have use ng-repeat="data in restCtrl.results | filter : paginate" with $resource:
http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview
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