The case is this, I'm using this policy AngularJS which is actually a bootstrap plugin made directive.
The directive in question accepts an attribute options
that is two-way binding and is within a ng-repeat
, something like this:
<div ng-repeat="item in list">
<date-range-picker options="options" ng-model="item.date"></date-range-picker>
</div>
As you can see the directive is a date-range-picker . Within the object that is passed to the attribute options
you can specify a minimum date from which to choose. What I want is for the minimum date to be the maximum date of the previous picker in the repeat.
For that the options object is something like this:
const options = {
opens: 'center',
minDate: 'DD-MM-YYYY',
maxDate: 'DD-MM-YYYY',
eventHandlers: {}
}
Then this object must be generated dynamically when the model of the previous item in the array is updated. It occurred to me to put together a function that takes as a parameter the $index
and returns the object. In the marking I stay:
<div ng-repeat="item in list">
<date-range-picker options="options($index)" ng-model="item.date"></date-range-picker>
</div>
and in the controller I have:
$scope.options = function (index) {
const minDate = index > 0 ? moment($scope.list[(index - 1)].date.endDate).format('DD-MM-YYYY') : '01-01-2018'
return {
opens: 'center',
minDate: minDate,
maxDate: '31-12-2018',
eventHandlers: {}
};
};
It works, but with some errors in the console each time the model is updated like the following:
I was investigating and I know that it is because the function returns an object with the same characteristics, this is a new object every time, it is not idempotent , then it launches the digest again because it thinks which changed until it reaches the maximum.
I tried some things that I saw on the internet like adding a $$ hashKey as mentioned in this one thread , leaving the object:
$scope.options = function (index) {
const minDate = index > 0 ? moment($scope.list[index].date.endDate).format('DD-MM-YYYY') : '01-01-2018'
return {
opens: 'center',
minDate: minDate,
maxDate: '31-12-2018',
eventHandlers: {},
$$hashKey: JSON.stringify(this)
};
};
But without results. It is appreciated if anyone knows the correct way to binde a model through a function without triggering the $ digest loops. Greetings and thanks for reading.