I have the following ng-repeat:
<td data-ng-repeat="scheduleAbsenceDayContainer in scheduleAbsenceMonthContainer.scheduleAbsenceDayContainers track by $index
and scheduleAbsenceDayContainer can contain an array of scheduleIntervalContainers:
My question now would be if there is any possibility to filter all scheduleIntervalContainers with a special containerType value.
My filter- name is is calles vm.absenceType:
<select name="typeSelection" id="typeSelection" data-ng-model="vm.absenceType"
I have tried this one withour success, because I don't know how to gete any or when not possible only the first one:
<td data-ng-repeat="scheduleAbsenceDayContainer in scheduleAbsenceMonthContainer.scheduleAbsenceDayContainers track by $index | filter: {scheduleIntervalContainers(any or - when not possible than only first): {containerType.value: vm.absenceType}}"
You will need to use nested ng-repeat. Then you can use a custom filter to filter the scheduleIntervalContainers using your vm.absenceType model variable.
<div data-ng-repeat="scheduleAbsenceDayContainer in scheduleAbsenceMonthContainer.scheduleAbsenceDayContainers track by $index">
<div data-ng-repeat="scheduleIntervalContainer in scheduleAbsenceDayContainer.scheduleIntervalContainers | filter: check" >
</div>
</div>
Custom filter function
$scope.check = function(a){
if (angular.equals(a.containerType,$scope.vm.absenceType))
return true;
else
return false;
}
You could also implement this without a custom filter function by renaming your filter model (if it's possible) to vm.containerType and giving filter : vm in the nested ng-repeat.
Related
Ok, looks easy, but not.
I want to perform a simply angular filter, but i need to specify which fields of my array use in filter.
A Basic filter is:
<li ng-repeat="person in app.people | filter: app.search">
A One-Field filter is:
<li ng-repeat="person in app.people | filter: {Surname: app.search}">
How can i specify more than one field for filter?
Something like:
<li ng-repeat="person in app.people | filter: {Name,Surname: app.search}">
Here a Plunker with Basic Filter and One-Field filter: https://jsfiddle.net/odLz1v71/3/
In this case, I would suggest you add a filter function in your controller like this:
vm.searchFilter = function(item){
// Add your own search logic here
return item.Name.includes(vm.search) || item.Surname.includes(vm.search);
}
And then use it like this:
<li ng-repeat="person in app.people | filter: app.searchFilter">
I don't think you can do this with the basic filter directly, but you can provide a function for the filter filter to use that will do this check for you:
vm.checkName = function (value) {
return value.Name.indexOf(vm.search) > -1 || value.Surname.indexOf(vm.search) > -1;
};
See: https://jsfiddle.net/odLz1v71/4/
I would like to filter my item store in database, but I don't want to use filter like this :
<li ng-repeat="post in posts | filter: { etat: 'enCours' } ">
This line filter all the posts where etat = 'enCours', but this cause me several problem cause I have several ng-repeat and I can't use $index.
I would like to do something like this :
<li ng-repeat="post in postsEnCours">
With using this function :
This line give me all the post store in my database
$scope.posts= Posts.query();
$scope.postsEnCours = $scope.posts.filter(function(item, index) {
return item.etat === 'enCours';
})
But nothing appears do you know why ?
You shouldn't be depended on ng-repeat's $index .
If you use isolate directive or directive with scope : true in ng-repeat, you won't find $index correctly.
Posts.query() may have callback. If it has callback then you have to put your filter inside it's callback's method.
i'm trying to order a json array using angularjs using timestamp, but its not working for somereson
<div ng-repeat="post in posts track by post.id|orderBy:'post_date':reverse" class="list-group-item apost">
<h4 class="timeline-title">{{post.title}}</h4>
</div>
js
$scope.Posts = [
{"id":1,"user_id":1,"title":"Welcome to MRI","body":"\u0641\u064a \u062d\u0627\u0644\u0647 \u0627\u064a \u0627\u0633\u062a\u0641\u0627","post_date":1422929860,"fullname":"MZ"},
{"id":3,"user_id":1,"title":"\u0641\u064a \u062d\u0627\u0644\u0647 \u0636\u0627,","post_date":1422933651,"fullname":"MZ"},
{"id":24,"user_id":1,"title":"\u0641\u064a \u062d\u0627\u0644\u0647 \u0627\u064a \u0627\u0633\u062a\u0641\u0633\u0627\u0631","body":"\u0628\u0631\u0631","post_date":1425404937,"fullname":"Mz"},
{"id":29,"user_id":1,"title":"new post","body":"fk shit mf","post_date":1425405333,"fullname":"MZ"}
]
i want to show newest posts first.
also is it possible to check if the post_date is today in angular template to apply a special class ?
According to this answer, you have to use track by after your orderBy statement.
And from ngRepeat documentation (see 'Arguments' table):
For example: item in items | filter:searchText track by item.id is a
pattern that might be used to apply a filter to items in conjunction
with a tracking expression.
Based on this info I think you want to use something like:
post in posts | orderBy:'post_date':true track by post.id
also is it possible to check if the post_date is today in angular
template to apply a special class ?
For this you could define a function to check if your value is today in $scope.
Angular JS:
.controller("PostCtrl", function($scope) {
$scope.isToday = function(date) {
/**
* Logic to determine if date is today or not goes here.
* Will either return true or false.
*/
};
})
Then within your HTML template, you can pass each post's date into isToday. If it returns true then your specialClass will get applied.
HTML:
<div ng-repeat="post in posts | orderBy:'post_date':true track by post.id" class="list-group-item apost">
<h4 class="timeline-title" ng-class="{specialClass: isToday(post.post_date)}">{{post.title}}</h4>
</div>
I'm trying to call a function (from a non event element) from a ng-repeat to feed an array of data to an autocomplete element (using https://github.com/JustGoscha/allmighty-autocomplete).
It's to generate a kind of logic system :
type(listbox) | comparator (eg:>=) (listbox) | value(autocomplete)
And several of those object can be listed on a webpage to get some complex logic
type=value && type2>value3 || ...
Depending on type and comparator, values are different.
The code so far (simplified):
<div class="comparator" ng-repeat="comp in container.comparators">
<select ng-model="comp.type"><option ng-repeat="i in type_options" value="{{i.value}}" ng-selected="{{i.value==comp.type}}">{{i.label}}</option></select>
<select ng-model="comp.comparator"><option ng-repeat="i in comp_options|filter:typeMatch(comp)" value="{{i.value}}" ng-selected="{{i.value==comp.comparator}}">{{i.label}}</option></select>
<autocomplete class="autocomplete" data="" attr-placeholder="Entrez votre valeur" click-activation="true" on-type="**updateValue**" ng-model="comp.value"></autocomplete>
</div>
updateValue is the function to call, but i need to know the current object (comp from the ng-repeat) on which i am to send the right array of value.
I tryed to send an existing array to avoid "digest loop"
$scope.updateValue = function(crit){
for(var i=0;i
I also tryed to do a function that return a function that return the array :DDDDD :
$scope.updateValue = function(crit){
return function(value/*not used*/){
for(var i=0;i<$scope.comp_options.length;i++) {
if($scope.comp_options[i].value===crit.comparator){
$scope.value_elements=$scope.comp_options[i].info;
break;
}
}
return $scope.value_elements;
};
};
Replacing the autocomplete object with :
if I console.log(comp), I see that I can get my object, but I get a digest loop ...
Is there a way to know the object of the "line" I was called from ?
Thx (i'm a total newbie in angular, but so far, i've been unable to find how to retrieve that information ... is that even possible :) ?).
Access it using $index ? Example below. You can then use the index to access it
<tr ng-repeat="user in uc.users track by $index">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.email}}</td>
<td>{{user.department}}</td>
<button ng-click="uc.open(user.id, $index);">Open</button>
</tr>
I'm apologizing for messy description of my problem. I hope you understand it.
I have this HTML code:
<form>
<input ng-model="attr.query" type="text" placeholder="{{attr.attr_name}}" ng-repeat="attr in attrs">
</form>
<table>
<tr ng-repeat="element in elements">
<td ng-repeat="(key, value) in element">{{value}}</td>
</tr>
</table>
JS controller:
$scope.attrs = [{'descr':'descr1'},{'descr':'descr2'}];
$scope.elements = [{'property1" : 'value1', 'property2' : 'value2'},{'property1" : 'value3', 'property2' : 'value4'}];
I need to filter each by query from input. But i need to filter only with the same attr as in input field.
I have some troubles to apply filter to array of objects.
Thanks
If I understand you correctly (I don't have enough rep to ask in a comment, sorry), you want to filter the data on one or more of several attributes.
The simplest way to do this is probably by defining a custom filter function accessible to your scope. AngularJS's filter filter will happily accept that as an evaluator.
$scope.customFilter = function(item) {
var passed = true;
if(/* the item doesn't pass muster */) {
passed = false;
}
return passed;
}
If it helps, I put together a fiddle to demonstrate. (NB. The query fields are case-sensitive.)