I have a checkbox that adds +2 if the user checks it. I need it to only do this one time. Right now the user can constantly add plus 2 which is not what I need. I need it to add it only once. (factors.Delivery is the ng-model)
I also need it to remove the --2 and stop if the checkmark is removed, but right now, it keeps subtracting.
Any help would be appreciated
Even disabling the check after clicking would be good, but it wont disable after clicking only before.
$scope.factors.Delivery = 0;
$scope.increment = function() {
if ($scope.factors.Delivery >= 0) {
$scope.factors.Delivery+=2;
} else {
$scope.factors.Delivery-=2;
}
};
2 is greater than or equal to 0. It sounds like the only acceptable values are 2 and 0 based on your post. I would suggest:
$scope.factors.Delivery = 0;
$scope.increment = function() {
if ($scope.factors.Delivery == 0) {
$scope.factors.Delivery=2;
} else {
$scope.factors.Delivery=0;
}
};`
or using your code, you can disable the checkbox with something like this:
ng-disabled="clickedOnce" on the checkbox and the modifications below.
$scope.factors.Delivery = 0;
$scope.clickedOnce = false;
$scope.increment = function() {
$scope.clickedOnce = true;
if ($scope.factors.Delivery >= 0) {
$scope.factors.Delivery+=2;
} else {
$scope.factors.Delivery-=2;
}
};
Related
I have written this custom filter for AngularJS, but when it runs, I get the infinite digest loop error. Why does this occur and how can I correct this?
angular.module("app", []).
filter('department', function(filterFilter) {
return function(items, args) {
var productMatches;
var output = [];
var count = 0;
if (args.selectedDepartment.Id !== undefined && args.option) {
for (let i = 0; i < items.length; i++) {
productMatches = items[i].products.filter(function(el) {
return el.Order__r.Department__r.Id === args.selectedDepartment.Id;
});
if (productMatches.length !== 0) {
output[count] = {};
output[count].products = productMatches;
output[count].firstProduct = items[i].firstProduct;
count++;
}
}
}
return output;
};
}).
This is the relevant HTML:
<tr class='destination' ng-repeat-start='pickupAccount in pickupAccounts | department : {"selectedDepartment": selectedDepartment, "option": displayExclusive }'>
<!-- td here -->
</tr>
displayExclusive is boolean.
I have written this custom filter for AngularJS, but when it runs, I get the infinite digest loop error.
Keep in mind that filter should return array of the same object structure. When we activate filter, it fires digest cycle that will run over our filter again. If something changed in output list - fires new digest cycle and so on. after 10 attempts it will throw us Infinite Digest Loop Exception
Testing
This empty filter will works (100%). Actually we do nothing here but return the same object that filter receives.
filter('department', function(filterFilter) {
return function(items, args) {
var output = items;
return output;
};
})
Now the main idea is: write some condition to push to output objects from input list a.e. items based on some if statement, a.e.
var output = [];
if (args.selectedDepartment.Id !== undefined && args.option) {
angular.forEach(items, function(item) {
if(<SOME CONDITION>) {
output.push(item);
}
});
}
By this way it will work too.
our case:
we have this logic:
productMatches = items[i].products.filter(function(el) {
return el.Order__r.Department__r.Id === args.selectedDepartment.Id;
});
if (productMatches.length !== 0) {
output[count] = {};
output[count].products = productMatches;
output[count].firstProduct = items[i].firstProduct;
count++;
}
Here we completely modified object that has been stored in output.
So next digest cycle our items will change again and again.
Conclusion
The main purpose of filter is to filter list and not modify list object content.
Above mentioned logic you wrote is related to data manipulation and not filter. The department filter returns the same length of items.
To achieve your goal, you can use lodash map or underscorejs map for example.
This happens when you manipulate the returned array in a way that it does not match the original array. See for example:
.filter("department", function() {
return function(items, args) {
var output = [];
for (var i = 0; i < items.length; i++) {
output[i] = {};
output[i] = items[i]; // if you don't do this, the next filter will fail
output[i].product = items[i];
}
return output;
}
}
You can see it happening in the following simplified jsfiddle: https://jsfiddle.net/u873kevp/1/
If the returned array does have the same 'structure' as the input array, it will cause these errors.
It should work in your case by just assigning the original item to the returned item:
if (productMatches.length !== 0) {
output[count] = items[i]; // do this
output[count].products = productMatches;
output[count].firstProduct = items[i].firstProduct;
count++;
}
output[count] = {};
Above line is the main problem. You create a new instance, and ng-repeat will detect that the model is constantly changed indefinitely. (while you think that nothing is changed from the UI perspective)
To avoid the issue, basically you need to ensure that each element in the model remains the 'same', i.e.
firstCallOutput[0] == secondCallOutput[0]
&& firstCallOutput[1] == secondCallOutput[1]
&& firstCallOutput[2] == secondCallOutput[2]
...
This equality should be maintained as long as you don't change the model, thus ng-repeat will not 'wrongly' think that the model has been changed.
Please note that two new instances is not equal, i.e. {} != {}
I have a deeply nested object. I have some records which contain 2 fields that show keys of object properties. I also have select needed to search records by property of object and input to search by key of object. So if I choose option1 and type in input some text, it will be shown the matches in the first field (not second!). And it's similar for second field.
How I try to realize:
I wrote a filter http://plnkr.co/edit/z9DEmfYz2grW9UonLcFK?p=preview
.filter('appFilter', function() {
return function(value, select, input) {
var result = [];
input = input.toLowerCase();
var reg = new RegExp(input,'g');
if (angular.isArray(value)) {
if (input === '' || $scope.isFiltering) {
return value;
} else if (select.value === 'Sequence') {
for (let i = 0; i < value.length; i++) {
if (value[i].Sequence.toLowerCase().match(reg)) {
result.push(value[i]);
}
}
return result;
} else if (select.value === 'ID') {
for (let i = 0; i < value.length; i++) {
if (angular.isArray(value[i].Document)) {
for (let j = 0; j < value[i].Document.length; j++) {
if (value[i].Document[j].ID.toLowerCase().match(reg)) {
result.push(value[i]);
}
}
}
}
return result;
} else {
console.log('error');
}
}
}
})
In controller I set to select's ng-model first option: $scope.selectParameter = $scope.parameter[0];
In debug I set to input parameter some value (123 for example).
So I searching record by first field that contains 123 value. And result finds and pushes the object. But in browser shows anything.
What's the problem? And I can't avoid the empty option with '?' value in my select :(
UPDATED
Nearly solve my problem: http://plnkr.co/edit/z9DEmfYz2grW9UonLcFK?p=preview
It filters by appropriate field and input value. But I faced with another troubles.
When input is empty it doesn't show any record. And second is when I choose second option (ID) filter duplicates some records.
Also I try to switch off filter without clearing the input text by clicking on checkbox.
It's what I want to do but it doesn't work:
else if (input === '' || $scope.isFiltering) {
return value;
}
$scope.isFiltering is ng-model for checkbox input
I tried using angulars default filter. I'm not sure if this is exactly what you want, but maybe it helps a little.
.filter('appFilter', function($filter) {
return function(value, select, input) {
if( !angular.isDefined(input) || input.length < 1) {
return value;
}
// Angulars "filter" lets you pass in a object-structure to search for nested fields.
var query =
(select.value === 'Sequence') ?
{Sequence:input} : {Document:{ID:input}};
return $filter('filter')(value, query);
}
})
http://plnkr.co/edit/Egkw9bUvTPgooc0u2w7C?p=preview
Is there a way to limit the number of selected items in ng-grid?
I did not find a setting to do that, so I am trying to prevent it using a watchCollection in gridOptions.selectedItems.
When the length of selectItems is greater than 5, I try to deselect the last selection but is not working as expected because the item row index seems to be different as rendered:
This is the watcher code:
$scope.$watchCollection('gridOptions.selectedItems', function (newVal, oldVal) {
if ($scope.gridOptions.selectedItems.length > 5) {
for (var i = 0; i < $scope.importableFilesData.length; i++) {
if ($scope.importableFilesData[i] === newVal[0]) {
$scope.gridOptions.selectRow(i, false);
}
}
}
Check your condition in this way. So, you don't have to search last selected row and you can deselect it directly. i've tested it and is working in this way.
$scope.yourGridApi.selection.on.rowSelectionChanged($scope,function(row){
if($scope.yourGrid.gridOptions.selectedItems.length>=5){
row.isSelected = false;
}
});
I have found a solution using beforeSelectionChange property. This property let you set callback that is triggered every time a row is selected. If your return false, the selection will be canceled.
$scope.gridOptions = {
// your grid options ...
beforeSelectionChange: function (row) {
if ($scope.gridOptions.selectedItems.length > 5) {
return false;
}
return true;
}
}
I have the following:
$scope.$watch('duration.dayPreference',function(value){
console.log(value);
if(value=='every')
{
that.duration.days = 1;
}
else if(value=='selected')
{
//alert('test');
that.duration.days=[];
}
else if(value=='everyday')
{
that.duration.days='everyday';
}
});
this.selectDay = function (day) {
$scope.duration.dayPreference = 'selected';
//$scope.$apply();
/*if(typeof(this.duration.days)!='object')
{
this.duration.days=[];
}*/
var index = this.duration.days.indexOf(day);
if (index == -1) {
//alert('test2');
this.duration.days.push(day);
}
else {
this.duration.days.splice(index, 1);
}
}
In this, when I do $scope.duration.dayPreference = 'selected'; I expect the line below it to have the this.duration.days set to a blank array. But it doesn't. Upon a closer inspection, I found that the callback in the $watch runs after the line below the assignment.
It may be very probable that, $watch may be using some kinda timers internally. What should be the way to do it then.
The watch won't be triggered until the digest is run. This will be after your entire function is compete.
If you consider that AngularJS is itself written in JavaScript, there would be no way for it to react to your setting of a property at the time. You are using the thread yourself. It can only wait for you to finish and then react.
As for what to do instead...
Perhaps you could call that watch function manually?
Or maybe the code which expects the empty array should belong inside the watch?
Watch will trigger on the $digest, which will occur after current cycle/code finishes running. You need to figure out a way of rearranging your code that handles things asynchronously. One possible quick solution might be:
var selectedDays = [];
$scope.$watch('duration.dayPreference',function(value){
console.log(value);
if(value=='every')
{
that.duration.days = 1;
}
else if(value=='selected')
{
//alert('test');
that.duration.days = selectedDays;
}
else if(value=='everyday')
{
that.duration.days='everyday';
}
});
this.selectDay = function (day) {
$scope.duration.dayPreference = 'selected';
var index = selectedDays.indexOf(day);
if (index == -1) {
//alert('test2');
selectedDays.push(day);
}
else {
selectedDays.splice(index, 1);
}
}
I have a problem. I am trying to create an animation, changing the color of several layers with a timeout between painted.
$scope.StartMovementsAnimation = function()
{
angular.forEach($scope.GameMovements, function(movement){
if (movement == "Green")
{
$scope.Green = true;
}
else (movement == "Orange")
{
$scope.Orange = true;
}
});
}
The problem I have is that I do not know how to stop or delay the flow loop. I'm pretty lost. I tried with $ timeout, sleep etc but does not work.
Any solution?
thanks
Don't use forEach. Use $timeout to repeat as many as the number of items in your GameMovements array.
Take a look at the following example. It is going to change className field from orange to green and vice versa till the variable left's value reaches 0.
$scope.className = "orange";
$scope.count = 0;
$scope.startAnimation = function() {
var left = 10
var ticker = function() {
if (left % 2 === 0)
$scope.className = 'orange'
else
$scope.className = 'green'
left -= 1
if (left > 0) {
$timeout(ticker, 1000)
}
}
$timeout(ticker, 1000)
}