Please see the CodePen below for clarification. I have a situation where I need to order the list dividers based on a "ParentId" field that is in each child of the parent. I have an array of ParentId's which specified the order that the parent items should appear in the list. How might I go about this? If you notice, I am losing the original order of my list dividers when using ng-repeat-start.
See CodePen Here
You need orderBy:
<a class="item"
ng-repeat="item in items | orderBy:'ParentId'">
{{item.Description}}
</a>
http://codepen.io/anon/pen/Ltxfv
I messed with your parent ID's on purpose, so you can see what's happening.
Related
I am looking for a way to filter a firebaselistobservable. I have code like the following
<div>
<a *ngFor="let lis of list | async" (click)="onSelect(lis)" >
{{lis.name}}
</a>
</div>
this.list = this.fb.getList('Instructors');
What i want to be able to do is once the list of instructors is loaded be able to type into a text box and as i type the names of the instructors will filter. I am having a lot of trouble figuring out a way to filter a firebaselistobservable, which in this case is my list. If anyone has a method to achieve this it would be greatly appreciated.
Thanks!
If you want to do the filtering on the client, just add a filter pipe to your ngFor directive. In angular2 it is not offered out of the box, but there are plenty available.
next question (sorry, I really try to code, but at the moment I don't understand everything).
I have a list with checkboxes which is generated with ng-repeat.
Above I have a tab navigation which I want to use as a filter.
I tried something like this (in many variations) but it doesn't work:
<span ng-repeat="item in items | filter: item.category: cat.category">
My exceptation is that on tab Category1, only bullhorn, car and star are shown, Category2 only euro, eye and facebook and tab Category3 only fax, feed and film are shown.
Now there are all items from the scope, not filtered after category.
Heres a plnkr example with my code: https://plnkr.co/edit/iCQRwH4XRr3DKQcQG329
Many thanks in advance!
What you want is to filter your Array with the cat Object, so you just add the Object witch you want to use to filter (look at the Docmentation > expression > Object):
<span ng-repeat="item in items | filter: cat.category">
Working Plunker
I have a long list of products that are displayed using ng-repeat and I'm creating a filter on the left to pare down the list in the main content well.
I have a requirement to pre-count the results of each possible filter such that the text of the link of that filter button will show the results you will receive if you turn that filter on, just like happens in an e-commerce site.
I'm wondering how to do this with AngularJS. I'm hoping there's an easier way to do this other than creating a custom filter on the scope for each possible filter.
Note that I don't have to worry about chaining filter values- just the results of selecting that one filter.
Thanks, Scott
Not knowing exactly what the data model looks like I can't say if you need a custom filter. But for a simple data model you should be able to use a simple filter like so:
<ul>
<li ng-repeat="item in items">
<a ng-click="filter(item.type)">{{item.name}} {{(allData | filter:item.type).length}}</a>
</li>
</ul>
Here is a working example http://codepen.io/mkl/pen/GqpqYN
I am using angularJS ui-sortable directive to sort my array. The code looks like in example:
<ul ui-sortable ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>
Is there a way to split the list in a view into two even columns?
For example now I have my list looking like:
1
2
3
4
The thing i want to achieve is to split the list in two columns to look like:
1|3
2|4
In this case I want to start filling the second column only when the first column is full (contains more than two elements).
Update: Thanks for those who answered my question and gave me useful ideas. I have made the solution for this case and if someone gets to the same situation this might be useful:
1) In your controller split the main array into two arrays of equal lenght
2) in your view make two ui-sortable lists (each list for a separate column). Each of the ui-sortable list must have set the ui-sortable options allowing to drag and drop items from first list to the second list and vice versa.
3) define the ui-sortable options in your controller. Options must contain the connectWith property (allowing to drag and drop items between separate lists) and the logic to keep lists the same length. Mine looks like that:
$scope.sortableOptions = {
stop: function () {
// if the first column contains more than 30 elements, move last element to the top of the next column
if ($scope.tpPart1.length > $scope.halfListLength) {
$scope.tpPart2.unshift($scope.tpPart1[$scope.halfListLength]);
$scope.tpPart1.splice($scope.halfListLength, 1);
}
// if the second column contains more than 30 elements, move the first element to the end of the first column
if($scope.tpPart2.length > $scope.halfListLength) {
$scope.tpPart1.push($scope.tpPart2[0]);
$scope.tpPart2.splice(0, 1);
}
},
connectWith: ".list-group"
};
So that's pretty much it. Hope somebody finds this helpful.
I've made a service to split an array by cols or rows.
You can use a double ng-repeat to iterate the subset
<ul ng-repeat="col in main.itemsCols">
<li ng-repeat="item in col">{{ item.text }}</li>
</ul>
Working example here
You could just use two ng-repeats and limit the first one to the first half of the list and the second one the the second half
<ul ui-sortable class="left-column">
<li ng-repeat="item in items | limitTo:items.length/2">{{ item }}</li>
</ul>
<ul ui-sortable class="right-column">
<li ng-repeat="item in items | limitTo:items.length/2:items.length/2">{{ item }}</li>
</ul>
Note: you'd have to take the ceiling of items.length/2 in your controller to get this working for arrays of odd length but that's the basic idea
i have a users like this
[{id:1,name:'name',parent_id:0,type:1},
{id:2,name:'name2',parent_id:0,type:2},
{id:3,name:"name1 child",parent_id:1,type:1}]
and i am trying to display parents and child users based on parent_id and type id so for example id 3 is child of id 1 and i am trying to display them like this
http://jsfiddle.net/U3pVM/689/
thanks for help
I fixed up your fiddle:
http://jsfiddle.net/eQP8S/
<div ng-controller="MyCtrl">
<ol>
<li ng-repeat="user in users | filter:{parent_id:0}">
{{user.name}}
<ol>
<li ng-repeat="child in users | filter:{parent_id:user.id, type:user.type}">
{{child.name}}
</li>
</ol>
</li>
</ol>
</div>
Your main problem was that you were trying to use the "filter" filter with a function, which is okay, but that function isn't allowed to take any parameters. If you actually need to create a filter that takes parameters you have to write a custom filter: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters.
But in your case, you can use the standard "filter" filter and pass it objects that will do what you want.
Also, curse you Angular developers for creating an abstraction called filter and then creating a "filter" filter. I mean, how confusing is that?
That is not the correct way to use filters. If you check the documentation, you have three options:
use a string. It will be searched deeply in the object. Any object with some deep value containing the string will match
use a function. It will be called for elements of the array. You should provide any parameter in the function's scope, not as a parameter to the filter.
use an object. It will work like the string match, but for specific properties.
If you use the third case
<li ng-repeat="child in users | filter:{parent_id: user.id, type: user.type}">
and moreover print the child's name
{{ child.name }}
then you'll see the correct results.
http://jsfiddle.net/waAc7/