Filtered ngRepeat - with model
Items1:
{{items1 | json}}
Items2:
{{items2 | json}}
// JS
.controller('NgRepeatFilteredWithModel', ['$scope', '$element', 'dragularService', '$filter', function TodoCtrl($scope, $element, dragularService, $filter) {
$scope.items1 = [{
content: 'Move me, but you can only drop me in one of these containers.'
}, {
content: 'If you try to drop me somewhere other than these containers, I\'ll just come back.'
}, {
content: 'Apple 3'
}, {
content: 'Orange 4'
}, {
content: 'Orange 5'
}, {
content: 'Apple 6'
}, {
content: 'Apple 7'
}, {
content: 'Apple 8'
}];
$scope.items2 = [{
content: 'Apple 9'
}, {
content: 'Orange 10'
}, {
content: 'Orange 11'
}, {
content: 'Apple 12'
}, {
content: 'Orange 13'
}, {
content: 'Apple 14'
}];
$scope.filter1query = 'Orange';
$scope.filter2query = 'Orange';
$scope.filteredModel1 = [];
$scope.filteredModel2 = [];
$scope.getFilteredModel = function (filteredModel, items, filterQuery) {
filteredModel.length = 0;
/*
* Following one-liner is same like:
* var filteredModelTemp = $filter('filter')(items, filterQuery);
* angular.forEach(filteredModelTemp, function(item){
* filteredModel.push(item);
* });
* Or like:
* var filteredModelTemp = $filter('filter')(items, filterQuery);
* for(var i; i < filteredModelTemp.length; i++){
* filteredModel.push(filteredModelTemp[i]);
* }
*
* You cannot just assign filtered array to filteredModel like this:
* filteredModel = $filter('filter')(items, filterQuery);
* Because you would replace the array object you provide to dragular with new one.
* So dragular will continue to use the one it was provided on init.
* Hopefully I make it clear. :)
*/
[].push.apply(filteredModel, $filter('filter')(items, filterQuery));
return filteredModel;
};
var containers = $element.children().eq(1).children();
dragularService.cleanEnviroment();
dragularService([containers[0],containers[1]],{
containersModel: [$scope.items1, $scope.items2],
containersFilteredModel: [$scope.filteredModel1, $scope.filteredModel2]
});
}]);
<!-- HTML -->
<div class='wrapper' ng-controller="NgRepeatFilteredWithModel">
<div class="tableRow">
<div class='containerVertical'>
<input ng-model="filter1query" style="margin:10px 10px">
</div>
<div class='containerVertical'>
<input ng-model="filter2query" style="margin:10px 10px">
</div>
</div>
<div class='tableRow'>
<div class='containerVertical'>
<div ng-repeat="item in getFilteredModel(filteredModel1, items1, filter1query)">{{item.content}}</div>
</div>
<div class='containerVertical'>
<div ng-repeat="item in getFilteredModel(filteredModel2, items2, filter2query)">{{item.content}}</div>
</div>
</div>
<div class="tableRow">
<div class='containerVertical'>
<pre>Items1:
<br/>{{items1 | json}}</pre>
</div>
<div class='containerVertical'>
<pre>Items2:
<br/>{{items2 | json}}</pre>
</div>
</div>
</div>