Comments (23)
Yes, I'm also interested in such a feature?
@amazingBastard Looks like a PR. Do you want to compile one? :)
from angular-deckgrid.
For me, I just filter the source collection via the angular $filter directive and it works nicely.
$scope.filteredItemsCollection = $filter('filter')($scope.allItems, {column: myFilter});
where :
- $scope.filteredItemsCollection is the collection to put in the source attribute of the deckgrid directive
- $scope.allItems is the object containing all the items to filter
- column is the column to filter
- myFilter is the data you want the column to be filtered.
Each time the collection change, the deckgrid is redraw.
I guess you can combine filters on several columns by adding more filters on the object :
$scope.filteredItemsCollection = $filter('filter')($scope.allItems, {column1: myFilter1, column2: myFilter2});
from angular-deckgrid.
Any ideas? I tried this...
<div class="deckgrid clearfix" deckgrid source="projects | sortBy:'name'" cardTemplate="app/partials/deckgrid-card.html">
but I get a bunch of errors, even thought the data did seem to sort. I would like to add a filter here so I can only show cards of a certain type based on user action.
see: http://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%22fn:%20function%20()%7Bvar%20a%3Dk(e)%3Bm(a,U%5Bc%5D)%7C%7C(m(a,g)%3Fq(e,a%3DU%5Bc%5D):U%5Bc%5D%3Da)%3Breturn%20g%3Da%7D%3B%20newVal for one of the errors
from angular-deckgrid.
You maight need to add a filter or sortBy in angular-deckgrid.js
See line 58, you'll notice ng-repeats in there.
So in the template div, add you filters like you would naturally:
data-ng-repeat="card in column | filter: filters | sortBy: orderProp"
controller can be:
$scope.filters = {}
$scope.orderProp = 'age';
Then you can have filter buttons in your html with ng-model="filters.category"
You'll need to add "category": "string" into your data.
I haven't tried this so no idea if it will work with angular-deckgrid.
from angular-deckgrid.
I am very interested in adding filters ... As I do?
from angular-deckgrid.
Ok, give me a few days to set one up.
from angular-deckgrid.
I wasn't able to get filters working with deck-grid the way I imagined it would. it may require writing a filtering function to work with the prototype.
I did however create a plunkr to at least show what I meant in the previous comment.
http://plnkr.co/edit/YIrMuDFnQGN0GmM6Nnvw?p=preview
Unfortunately the example isn't using deck-grid but it can at least be used to point you in the right direction. In the meantime I'll try working on adding filters into the actual directive so I'll post an update if I have a breakthrough.
Cheers.
from angular-deckgrid.
+1
from angular-deckgrid.
+1 has anyone found a solution?
from angular-deckgrid.
I got this to work, although it's a bit tricky. Change the template like amazingBastard said, but remember that the grid creates an isolate scope. So access your filter on 'mother'. So my template looks like this.
this.template = '<div data-ng-repeat="column in columns" class="{{layout.classList}}">' +
'<div data-ng-repeat="card in column | filter: mother.selectOptions.filter" data-ng-include="cardTemplate"></div>' +
'</div>';
In that same directive I inject $compile then right after this.template = ...
I run $compile(this.template).
Seems to work,
from angular-deckgrid.
I encountered the same infdig problem as mentionned initially by @theviking. Filter handling would definitely be a welcomed addition to this directive.
from angular-deckgrid.
@tylermcginnis33 I'm having the same problem, would you be able to show me how you injected the $compile in to the directive?
from angular-deckgrid.
Damn... at the beginning I was happy I do not have to filter and I've ignored this feature while I choosed this lib. Now I need it. @tylermcginnis could you please explain a bit more how you did it?
from angular-deckgrid.
alright.. was MUCH easier than I've expected.
Just patched the js a bit
<div data-ng-repeat="card in column | filter:mother.filters:strict">
You can remove :strict
if you don't need that.
And I have a
$scope.filters = {};
in my controller and onClick, I set some new filter like this:
$scope.filterNeighbors = function (value) {
console.log(value);
if(value == "all") {
$scope.filters = {};
}
if(value == "new") {
$scope.filters = {isNewUser: true};
}
};
That's it.
from angular-deckgrid.
@hirbod My solution was something like that. I remember it still actually wasn't exactly what I needed so I ended up scraping the whole thing and used a different tool.
from angular-deckgrid.
Hi, it would be nice if the Descriptor template could be external using this.templateUrl
instead so it can be replaced with a custom one https://github.com/akoenig/angular-deckgrid/blob/master/src/descriptor.js#L31
I tested it here http://plnkr.co/D97HkXGk0qIteobfbpko based on @amazingBastard's idea.
from angular-deckgrid.
@futhr and @akoenig Just need to make a small modification and generates filters. Look
from angular-deckgrid.
@alejonext Exactly, but that part should be a template that you can replace with your own, now its baked into the vendor code.
from angular-deckgrid.
Hi everybody!
I tried to fix this in my own way, but I don't know whether it is a clean fix or not.
However, it seems to work for me and it seems to be a different approach from the ones proposed so far..
Basically I injected $filter
dependency in the module and used it in
Deckgrid.prototype.$$createColumns = function $$createColumns () {
/*...*/
angular.forEach($filter('filter')(this.$$scope.model, this.$$scope.filter), function onIteration (card, index) { /*...*/ }
/*...*/
}
in order to filter source
attribute by a new directive attribute (called filter
) for which I registered a new watcher
filterWatcher = this.$$scope.$watchCollection('filter', this.$$onModelChange.bind(this));
this.$$watchers.push(filterWatcher);
pull request still needed?
from angular-deckgrid.
@futhr, @alejonext, @hirbod I have one issue with your solution: Cards stack on top of each other instead of again distributing equally over the different columns. Something like that. Any idea how to solve that?
from angular-deckgrid.
Well @Nicolazinho Okay, like the columns of the same form it is constructed to generate the filter.
from angular-deckgrid.
Thanks @pauzzle . I had to implement your solution as a function that works on ng-change. Out of curiosity, did you have to do that.
Here is how i'm doing it:
- $http call to grab video collection which gets set as $scope.videos in a .then()
- Implement a text-box with ng-model "query"
- Add a ng-change handler on the text box that calls "UpdateFilters()"
I tried it without ng-change, but the collection didn't seem to update when typing in values.
$scope.getVideos = Videos.getVideos()
.then(function(response) {
$scope.videos = response.data;
$scope.videosCollection = response.data;
$scope.videoCount = _.size($scope.videos);
})
.catch(function(response) {
console.log(response);
toastr.error(response.data.message, response.status);
});
$scope.updateFilters = function() {
$scope.videosCollection = $filter('filter')($scope.videos, {videoTitle: $scope.query, type: $scope.typeQuery});
}
from angular-deckgrid.
Hi @TaylorAckley.
I didn't use ng-change event to filter my deckgrid but ng-click event.
I guess it work with ng-change also. Maybe you need a $scope.$apply(); after you trigger $scope.updateFilters() with ng-change.
For $scope.videoCount, maybe you can consider using $scope.videos.length so you don't need to use undescore library.
Hope this can help.
from angular-deckgrid.
Related Issues (20)
- Error on safari
- regex for checking deckgrid styles does not work in IE9
- Virtual Scroll HOT 2
- number of columns
- Edge issue with class(es) on [deckgrid] HOT 2
- Any plan for Angular2? HOT 1
- Initial Setup
- after adding more data to source, how to notify the layout? HOT 1
- Nested transclude broken HOT 2
- OrderBy
- How can I use angular-deckgrid with the latest angularjs version?
- .
- Supporting differing templates based on condition
- shortcut mother.* doesn't work
- give index when card select
- Dynamic columns HOT 2
- Submit to npmjs.com! HOT 9
- Scroll down to load more
- Module Loader Support
- Dynamically changing the number of columns HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-deckgrid.