Having some trouble setting up a directive where I can pass both the data and a specific filter to be used in the ng-repeat. My current approach doesn't seem to be working, so I might need to rethink my strategy.
Any suggestions on how I can pass in the filter? Alternatively, is there a way to prefilter/sort the list before passing it in?
(It's important that the scope remains isolated, as I need to have multiple lists on the same page.)
<!DOCTYPE HTML>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>
var myApp = angular.module('MyApp', []);
myApp.controller('mainPage',function($scope){
$scope.cars = ["Saab","Volvo","BMW"];
});
myApp.directive('carList',function(){
return {
scope: {
listOfCars: '=',
carFilter : '@'
},
restrict: 'E',
replace: 'true',
template: '<table>\
<tr ng-repeat="{{carFilter}}">\
<td>{{car}}</td>\
</tr>\
</table>'
};
});
</script>
</head>
<body ng-controller="mainPage">
<car-list list-of-cars="cars" car-filter='car in listOfCars | orderBy:"toString()"' ></car-list>
</body>
</html>
Check out the Plunker link with the code above: http://plnkr.co/edit/ipsF15?p=preview