angular
.module('app', [])
.controller('lodashUsageController', lodashUsageController);
function lodashUsageController($scope) {
$scope._ = _;
$scope.list = [1, 2, 3, 4, 5, 6];
$scope.even = function(item) {
return {
val: item,
isEven: item % 2 === 0
};
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="app">
<div ng-controller="lodashUsageController">
<ul>
<li ng-repeat="item in _.map(list, even) track by $index">
{{item.val}} - {{item.isEven}}
</li>
</ul>
</div>
</div>
As mentioned by Jon Snow, using lodash functions directly within ng-repeat is not recommended.
However, there is a workaround. A jsbin example has been created to demonstrate this.
To make lodash accessible for angular binding, you need to expose "_" as a $scope variable.
$scope._ = _;
Instead of having direct anonymous functions within the binding, create them in the controller and then access them from ng-repeat.
HTML
<div ng-controller="lodashUsageController">
<ul>
<li ng-repeat="item in _.map(list, even) track by $index">
{{item}}
</li>
</div>
JavaScript
function lodashUsageController($scope) {
$scope._ = _;
$scope.list = [1, 2, 3, 4, 5, 6];
$scope.even = function(item) {
return item % 2 === 0;
}
}