I'm using Angular 1.2.10 (~ Stable ~)
I have something like this :
<tr ng-repeat="server in servers.hits.hits | orderBy: type.id">
My server object look like this :
server = {
name = "String",
type = {
id: Integer,
label: "String"
},
url: "String"
}
My server list is not organized properly but in an Angular-UI < select > it works.
Plus I don't know if it's possible but I sometimes need to put a double orderBy
( | orderBy:['id', 'label'] ) but also it won't work.
Anyone knows what's wrong ?
Thanks
Try this
<tr ng-repeat="server in servers.hits.hits | orderBy:'type.id'">
see this fiddle: http://jsfiddle.net/bDPW2/1/
More info from the docs:
filter:orderBy(array, expression[, reverse]);
A string as an expression:
string: An Angular expression which evaluates to an object to order by, such as 'name' to sort by a property called 'name'. Optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name).
Related
I need to render characters such as < and >, which may be included in a user's first or last name. I'm using angular translate to render the name, passing the first and last name as values. However, if the first or last name contains < the value will not be displayed. I think I need to use something like ng-bind="translation_key | translate | values" but this is incorrect. How can I use ng-bind with angular translate interpolation? Is this the correct way to go about rendering a translated value that contains chars such as <, >? Thanks.
*Edit
This almost works but the sanitizer outputs an error.
ng-bind="'locales.user_filter' | translate: { first: user.firstName, last: user.lastName }"
Error: [$sanitize:badparse] The sanitizer was unable to parse the following block of html:
I wound up using a filter before passing the values to the translation key.
.filter('htmlEntities', function () {
return function (input) {
return String(input).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
};
});
var first = $filter('htmlEntities')(scope.user.firstName);
var last = $filter('htmlEntities')(scope.user.lastName);
scope.displayName = $translate.instant('locales.user_filter', { first: first, last: last });
<td ng-bind-html="displayName"></td>
How to filter my object inside expression value?
I have this ng-repeat
ng-repeat="(series, detailData) in projectDetails"
the return of detailData is object which is i need to filter to get exactly field that i need.
{"projectViewType":"card1",
"projectName":"Hamilton",
"projectType":"Onprocess"},
{"projectViewType":"card2",
"projectName":"Christone",
"projectType":"Done"},
{"projectViewType":"card2",
"projectName":"Villas",
"projectType":"Done"} .... more
I need to filter this result with projectType = Done
and return all object with projectType = Done
You can try this
<div ng-repeat="project in projectDetails| filter: { projectType : 'Done' }">
Can't you just add a standard filter?
ng-repeat="(series, detailData) in projectDetails | filter:{'projectType':'Done'}"
I don't even think you'd need a custom filter.
Check the docs here https://docs.angularjs.org/api/ng/filter/filter especially the part where it describes the expression argument.
ng-repeat="(series, detailData) in projectDetails | filter: projectType == "Done" "
I'm using angularjs ng-repeat to sort my records by clicking on table headers, I've found an example who works perfectly, the code are like this:
<th ng-repeat="header in headers">
<a ng-click="toggleSort($index)">{{ headers[$index] }}</a>
</th>
Here is a fiddle of this example.
But, my problem is there are index with ":" in my object, and it cause an error like "TypeError: Cannot read property 'col:A' of undefined"
Here is a demo with ":"
So, how can I make it work with ":" ?
This is a bug which happens when a special character, such as '%', is used in the OrderBy filter to sort the object by the key.
You can find more details about this issue here:
https://github.com/angular/angular.js/issues/6143
It seems to have been corrected in Angular 1.3.0-beta3.
A workaround is to write your own compare function and to use the sort() method of Array.
I've updated your fiddle to give you an idea of an compare function and how to use it:
function compare(a,b,property) {
if (a[property] < b[property])
return -1;
if (a[property] > b[property])
return 1;
return 0;
}
You should change the way you call the parameters in the array:
$scope.headers = ['sortColumn', 'colB'];
$scope.records = [{sortColumn: 'a1', colB: 'd1'}, {sortColumn: 'c2', colB: 'b2'}, {sortColumn: 'b3', colB: 'c3'}, {sortColumn: 'd4', colB: 'a4'}];
$scope.sortColumn = 'colA';
Fiddle
I'm using ng-repeat to create a list of entires and using a filter.
Is it possible to get the number of entries returned, like a length
data-ng-repeat="entry in entries | filter: { country_code : countryCode }"
It is little bit tricky, use ng-init:
ng-init="filter_len = (entries | filter: { country_code : countryCode }).length"
Example: http://jsfiddle.net/KJ3Nx/
As you know filter responsible to "filter" the input list and it returns filtered list where objects have the same structure. Otherwise you get digest cycle reentering that causes Exceptions (aka > 10 cycles).
1st way
Get length after filtering:
<pre>{{(entries| myfilter:types).length }}</pre>
See Example
2nd way
Use custom filter and get length from there.
iApp.filter('myfilter', function() {
return function( entries) {
var filtered = [];
angular.forEach(entries, function(entry) {
filtered.push(entry);
});
// here fetch list length
return filtered;
};
});
I suppose the following code will work for you:
<p>Filtered number: {{(entries|filter:{country_code:countryCode}).length}}</p>
<p>Total number: {{entries.length}}</p>
The AngularJS Noob Handbook has some code which reduces class manipulation to a simple expression and binding :
<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">
However, what is the expression syntax in ng-class? I understand that a vertical bar (|) would pass through a filter and that a filter can be passed parameters after a colon but the above code is doing something different. If the scope variable on the right evaluates to true then the expression on the left is included otherwise it's dropped.
Is this specific to the ng-class directive? Is there some documentation on http://docs.angularjs.org that explains this?
This is mentioned briefly (too briefly, in my opinion) in the ngClass documentation. If you pass an object to ngClass, then it will apply each key of the object as a class to the element if that key's value is true. For example:
$scope.first = true
$scope.second = false
$scope.third = true
with
<div ng-class="{a: first, b: second, c: third}"></div>
would result in
<div class="a c"></div>
you've probably also seen something like this:
<div ng-class="{true: 'complete'}[item.Id != 0]"></div>
Very rad syntax.
EDIT:
What happens here, is that the "complete" class is added to the element if(item.Id != 0). Alternatively, we could write: <div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]. As its decided by the monsterEatsCookies function, Elmo does not eat cookies so since this function returns false the html element gains a class called cookieless.
A simple example: <div ng-class="{false: 'DoubleNegative'}[1 == 0]. 1 !== 0 which is "false" -- the "DoubleNegative" class is added to the element.
<div ng-class="{ true: 'complete' } [item.Id != 0]"></div>
`
| | | | | | | |
| |result| |className | | | |
| | | | |
| function | | | condition |
Addendum
Also, I just realized that you can use a variety of different keys to map to your condition. For example:
ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"
The mute class will be applied if item has no "hasValue" property. Furthermore, you can apply a class for any given type or value:
{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]
In the following collection, this would embolden a person's name while hiding items that are objects:
[
'Jonathan Chapman',
{ aka: 'Johnny Applyseed' },
'Brad Pitt',
{ details: 'Fights Zombies' }
]
With this, you could watch for specific values in any $scope property. I suppose this could come in very handy at times.
Cheers
ng-click="flags.open=!flags.open"
switch the value of the flags.open to true or false.
And
ng-class="{active:flags.open}"
decides whether the class active is present or not based on the value of flags.open.
Please see the Fiddle demonstrating the above example.
like this example below :
div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")
Here's how you can pass expression with filter:
<div ng-class="{ 'customer-page': ('customer' | isRoute),
'orders-page': ('orders' | isRoute) }">....</div>