We Keep Coding

on click checkbox, array loses its value

I am invoking a function when we click on the checkbox and based on that clicking, I am pushing all the invoices which have pdf from a for loop by calling the url based on some row selected in the form. I console log the array and i am able to find the available invoices array, but somehow that array gets empty when i have a condition that if we have content in the array, we show a message. Is there something i am missing. Here is my code
isExist brings true or false. If its true we push that invoice in availableInvoicesPdf
if its false we push that value in noAvailableInvoicesPdf. itemChecked is ng-model binded with the checkbox
onChange() {
this.availableInvoicesPdf = [];
this.noAvailableInvoicesPdf = [];
this.allPdfResponseAvailable = false;
for (let i = 0; i < this.invoices.length; i += 1) {
// eslint-disable-next-line no-loop-func
this.Invoice.hasPdf(this.invoices[i].id).then((isExists) => { // calls a function which have a function hasPdf and takes id of the invoices selected to return back the response
if (isExists) {
this.availableInvoicesPdf.push({ //pushing invoice id and number for the invoices which have pdf available. I made sure that it had a pdf everytime.
id: this.invoices[i].id,
number: this.invoices[i].number
});
} else {
this.noAvailableInvoicesPdf.push({
number: this.invoices[i].number,
});
}
// i dont have value for available invoices pdf here. Somethinf weird if i console log it then i am able to see it, but when i debug, the array is empty.
});
}
this.showSuccessMessage = false;
this.noInvoiceMessage = false;
if (this.itemChecked && this.availableInvoicesPdf.length === 0 && this.noAvailableInvoicesPdf.length === 0) { // i dont have value for available invoices pdf here
this.checkInvoicesHasPdf();
console.log('after running invoice pdf', this.availableInvoicesPdf);
if (this.availableInvoicesPdf.length > 0 && this.noAvailableInvoicesPdf.length > 0) { // i dont have value for available invoices pdf here
this.showSuccessMessage = true;
this.noInvoiceMessage = true;
} else if (this.availableInvoicesPdf.length > 0 && this.noAvailableInvoicesPdf.length === 0) { // i dont have value for available invoices pdf here
this.showSuccessMessage = true;
} else if (this.availableInvoicesPdf.length === 0 && this.noAvailableInvoicesPdf.length > 0) { // i dont have value for available invoices pdf here
this.noInvoiceMessage = true;
}
} else {
this.attachDefaultInvoice = this.itemChecked;
}
}
Here is the hasPDF Code:
hasPdf(id) {
const url = `${this.ARConstant.EXPORTING_REST_API_URL}pdf/${id}`;
return this.$http.head(url)
.then(() => true)
.catch(() => false);
}
HTML:
<div class="pane-content" layout="column" ng-if="$ctrl.invoices.length <= 100">
<div class="form-row" layout="row">
<div class="attachPdf" flex="20">{{ 'attachPdf' | translate }}</div>
<md-checkbox ng-disabled="$ctrl.isItaly" aria-label="{{ 'toAttach'| translate }}"
class="attachPdf-cb md-primary" ng-model="$ctrl.itemChecked" ng-change="$ctrl.onChange()">
</md-checkbox>
<p ng-if="$ctrl.itemChecked && !$ctrl.allPdfResponseAvailable">{{ 'waitPdfUpload' | translate }} {{$ctrl.invoicesPdf.length}} /
{{$ctrl.invoices.length}}</p>
</div>
</div>
<div class="pane-content" layout="column" ng-if = "$ctrl.showSuccessMessage">
<div class="form-row" layout="row">
<div class="success-box-header-hidden" flex="20"></div>
<div flex="80" class="success-message">
<p class="success-text">
<md-icon class="ionicons-svg-md-checkmark-circle" md-svg-src="img/ionicons-svg-md-checkmark-circle.svg"></md-icon>
<span></span>Invoices PDF uploaded successfully</p>
</div>
</div>
</div>

Angular JS filter an array with search input

So, my problem is that I want to create an search input field, which I have already done and I am using a search filter in an ng-repeat. What I want now to do is to select all the items I searched for using the select all checkbox.In this moment when I click the select all checkbox it checks all of my items from my array not from what I searched.
This is my html:
<div class="modal-body">
<div>
<md-input-container flex> <label>Search</label>
<input ng-model="search.name"> </md-input-container>
<md-button class="md-primary" ng-click="saveValues()">Update</md-button>
</div>
<div class="md-list">
<md-checkbox ng-model="modelItemsList.allItemsSelected"
ng-change="selectAll()">
Select all
</md-checkbox>
<md-list> <md-list-item class="md-3-line"
ng-repeat="mod
elItem in modelItemsList | filter:search">
<div class="md-list-item-text">
<md-checkbox ng-model="modelItem.isChecked " aria-label="Checkbox 1" ng-change="selectModelItem(modelItem)">
<h3>{{ $eval('modelItem.'+propertyName) }}</h3>
<p>{{ $eval('modelItem.'+propertyDesc) }}</p>
</md-checkbox>
</div>
</md-list-item> </md-list>
</div>
</div>
This is my select all function:
$scope.selectAll = function(){
console.debug("searchText", $scope.search);
//filteredArray = filterFilter($rootScope.modelItemsList, $scope.search);
//console.log(filteredArray);
console.log($rootScope.modelItemsList.allItemsSelected);
$rootScope.temp = [];
console.log($scope.modelItemsList);
$rootScope.modelItemsList.allItemsSelected = !$rootScope.modelItemsList.allItemsSelected;
console.log($rootScope.modelItemsList.allItemsSelected);
if($rootScope.modelItemsList.allItemsSelected){
for (var i = 0; i < $scope.modelItemsList.length; i++) {
$rootScope.temp.push($scope.modelItemsList[i].name);
console.log($scope.modelItemsList[i].name);
$scope.modelItemsList[i].isChecked = $rootScope.modelItemsList.allItemsSelected;
console.log($scope.modelItemsList[i].isChecked);
console.log($rootScope.modelItemsList.allItemsSelected);
}
}
else if (!$rootScope.modelItemsList.allItemsSelected){
for (var i = 0; i < $scope.modelItemsList.length; i++) {
$scope.modelItemsList[i].isChecked = $rootScope.modelItemsList.allItemsSelected;
$rootScope.temp = [];
console.log($scope.modelItemsList[i].isChecked);
}
}
}
I think I should make some kind of filter, but I am not so sure. I mean in my JS file in the select all function. Does anybody have any idea how should I do this ?

The easiest way to do this is to name the filtered list:
ie
<md-list-item class="md-3-line" ng-repeat="modelItem in filtered = ( modelItemsList | filter:search )">
...
</md-list-item>
Then in the controller you can access $scope.filtered
FYI
you can change {{ $eval('modelItem.'+propertyDesc) }} to
{{ modelItem[propertyDesc] }}

I'm sorry, but you weren't very clear in your question. From what I understand, this is what you want.
What I want now to do is to select all the items I searched for using the select all checkbox
Check out this plunkr where it's implemented.
https://plnkr.co/edit/vjzJEm8Wck8b5iUD4qz8?p=preview
The way you could do this is by setting up ng-change on your select all checkbox
<input type="checkbox" ng-change="selectAllFiltered()" ng-model="checkbox.value2" ng-true-value="true" ng-false-value="false"/>
Next, you would define the selectAllFiltered method in your controller. The objective is to set isSelected on $scope.filtered array when the array is filtered.
And when the array is NOT filtered, i.e. there is no string in the search.name field, then set isSelected on $scope.modelItemsList array.
Here's what your controller method should look like...
$scope.selectAllFiltered = function() {
if ($scope.checkbox.selectAll) {
$scope.checkbox.selectAll = false;
} else {
$scope.checkbox.selectAll = true;
}
if (!$scope.search.name) {
console.log('when no name is entered')
for (var i = 0; i < $scope.modelItemsList.length; i++) {
if (angular.isUndefined($scope.modelItemsList[i].isSelected)) {
$scope.modelItemsList[i].isSelected = $scope.checkbox.selectAll;
} else {
$scope.modelItemsList[i].isSelected = !$scope.modelItemsList[i].isSelected;
}
}
} else {
console.log('when some name is entered');
for (var i = 0; i < $scope.filtered.length; i++) {
if (angular.isUndefined($scope.filtered[i].isSelected)) {
$scope.filtered[i].isSelected = $scope.checkbox.selectAll;
} else {
$scope.filtered[i].isSelected = !$scope.filtered[i].isSelected;
}
}
}
}

How to register order of checkboxes in AngularJS?

I currently have a list of checkboxes in my webapp. I want to show the order in which the checkboxes have been checked. So I wrote the code below.
$scope.updateNumbers = function(id, checked, inputs) {
if (checked === true) {
$scope.count += 1;
var span = angular.element('#'+id+'-'+id);
span.html($scope.count);
} else {
if ($scope.count != 0) {
$scope.count -= 1;
}
for (index = 0; index < inputs.length; ++index) {
var input = inputs[index];
var span = angular.element('#'+test.id+'-'+test.id);
if (span.html() > $scope.count || span.html() == $scope.count) {
span.html(span.html()-1);
}
}
var span = angular.element('#'+id+'-'+id);
span.html($scope.count);
}
}
And this HTML
<div class="list-view__body__row" ng-repeat="restaurant in restaurants">
<div class="list-view__body__cell">
<input type="checkbox" id="<% restaurant.id %>" value=""
class="input-field__checkbox--input"
ng-model="restaurant.checked"
ng-change="updateNumbers(restaurant.id, restaurant.checked, restaurants)">
<label for="<% restaurant.id %>"
class="input-field__checkbox--label"
ng-bind-html="restaurant.name|html"></label>
</div>
<div class="list-view__body__cell">
<div class="order__wrapper" ng-show="restaurant.checked">
<span id="<% restaurant.id %>-<% restaurant.id %>">0</span>
</div>
</div>
</div>
In the current implementation, though, sometimes the number will go down to 0 or numbers will appear twice. It's not working correctly, so how can I improve on this code?

With angular you always want your data model to drive the view. Note that the following solution requires no dom manipulation code and angular manages the dom based on the data. It also requires very little code.
All you need for this is an array of the checked restaurants in your data model.
Then the order is determined by the index within this array and the count is the length of the array.
Controller:
// array to store selections
$scope.checkedItems=[];
$scope.updateSelections = function(rest){
if(rest.checked){
// add to array if item is checked
$scope.checkedItems.push(rest)
}else{
// remove from array if not checked
$scope.checkedItems.splice($scope.checkedItems.indexOf(rest),1)
}
}
View:
<div ng-repeat="restaurant in restaurants">
<div>
<input type="checkbox" ng-model="restaurant.checked"
ng-change="updateSelections(restaurant)">
<label ng-bind="restaurant.name"></label>
</div>
<div ng-show="restaurant.checked">
<!-- Use index to display order -->
Order: <span>{{checkedItems.indexOf(restaurant) +1}}</span>
</div>
</div>
<h3>Count of checked items: {{checkedItems.length}}</h3>
DEMO

Two array types into one function

I have a form where you click a button and a collection of elements need the opacity changed and the radio or checkbox selected. I have a bunch of these in the form so I need assistance with creating this type of array. Some of the IDs are dp001, dp002 …. dp050 so there needs to be a condition appending the prefix to it when it gets to dp010. This collection of elements I want to change the opacity. The other collection of elements isn't in any particular order but I want to collect them and make them checked. Somewhere I created a FUBAR :)
Fiddle won't work … really pi$$ing me off don't know why jsfiddle refuses to load javascript for me. Is This Fiddle FUBAR?
On my web server the alert works fine the doesn't do what I want.
Javscript works on my server check it out.
HTML
<div id="dp001">Item #1 <input type="radio" id="abc005"></div>
<div id="dp002">Item #2 <input type="radio" id="abc008"></div>
<div id="dp003">Item #3 <input type="checkbox" id="abc010"></div>
<div id="dp004">Item #4 <input type="checkbox" id="abc020"></div>
<div id="dp005">Item #5</div>
<div id="dp006">Item #6</div>
<div id="dp007">Item #7</div>
<div id="dp008">Item #8</div>
<div id="dp009">Item #9</div>
<div id="dp010">Item #10</div>
<div id="dp011">Item #11</div>
<button type="button" onclick="DoStuff();">Click</button>
JAVASCRIPT
function DoStuff() {
var items = null;
var checkMe = ["abc005" , "abc0008" , "abc010" , "abc020"];
for (i=1 ; i < 12 ; i++) {
if (i < 10) {
items = 'dp00' + i;
} else {
items = 'dp0' + i;
}
}
alert("ding");
document.getElementById("items").style.opacity="0.5";
document.getElementById("checkMe").checked = true;
}

I think you need
function DoStuff() {
var checkMe = ["abc005" , "abc0008" , "abc010" , "abc020"];
for (var i=1; i < 12; i++) {
var items = 'dp0' + (i<10 ? '0' : '') + i;
document.getElementById(items).style.opacity = 0.5;
}
for (var i=0, l=checkMe.length; i<l; ++i)
document.getElementById(checkMe[i]).checked = true;
}
Problems with your code:
"items" is a literal string, not the variable items. Same for "checkMe".
You must change each element inside the loop, not outside.
You don't declare variable i
You can use the ternary conditional to simplify code (optional)

Angularjs enabling disabled dropdowns in the ng-repeat

Hi in following html code I am using ng-repeat to display all the rows with name and the dropdowns.
<div ng-repeat="a in items">
<div>
<span>{{a.name}}</span>
</div>
<div>
<select ng-model="a.c_id" ng-options="d.c_id as d.description for d in loclist" ng-disabled="display" ng-change="selected(a.c_id)">
</select>
</div>
<button ng-click="submit(items)">Submit</button>
In my controller when value of c_id is 3 it disables the dropdown using following code
$scope.display = false;
$scope.selected = function (value) {
this.te = value;
if (this.te == 3) {
this.display = true;
}
};
Using submit button I want to first enable all the dropdowns that were disabled previously. Using the following code
$scope.submit=function(items)
{
for(i=0; i< items.length; i++)
{
this.display=false;
}
}
It doesnt work. It will not set display=false for the dropdown to be enable.
Please let me know how to correct this issue so I can reset the display to false.
Thanks

A simple solution is to bind ng-disabled with an item instead of the scope:
ng-disabled="a.display"
on ng-change, pass the item to the function:
ng-change="selected(a)"
Change your select function to update the display property on an item:
$scope.selected = function (item) {
var value = item.c_id;
this.te = value;
if (this.te == 3) {
item.display = true;
}
};
In your submit function, just loop through the items and reset the display:
$scope.submit=function(items)
{
for(i=0; i< items.length; i++)
{
items[i].display=false;
}
}

I think you have a typo here
ng-click="submit(items)"
Correct it as follows sbumit to submit
$scope.submit=function(items)
{
for(i=0; i< items.length; i++)
{
this.display=false;
}
}