angularjs correct row is not being deleted from table - angularjs

I have been struggling with a couple of issue so I thought I would reach out for help after doing much searching. I'm using AngularJS.
My first problem is that checkbox is not working properly when I use ng-repeat, it will only check the first box in the table code snippet below. I'm using a custom checkbox which I coded with css is the reason for the label.
My second issue is when I click on the check box it should delete any row I want but it deletes the row before it if I start from the bottom of the table up, but if I start from the top of the table down it works as expected except for the box being checked code snippet. I tried many ways to set the index but it still does not work.
$scope.removeRow = function(type) {
var index = -1;
var myArr = eval( $scope.contacts );
for( var i = 0; i < myArr.length; i++ ) {
if( myArr[i].type === type ) {
index = i;
break;
}
{
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.contacts.splice(index, 1);
};

First off, don't use eval($scope.contacts). If that variable is a string and contains javascript it will run that javascript. if myArr isn't defined using myArr = $scope.contacts you can use myArr = JSON.parse(JSON.stringify($scope.contacts) or use angular.copy method.
I don't see your html, so I can't tell you why your checkbox doesn't work. But regarding your second problem, if it's deleting a row above when you hit splice, why not change that code to :
$scope.contacts.splice(index + 1, 1)

Related

set value on sidebar

I am having one google sheet having more than 100 rows with column of "NAME, PLACE, PHONE". I want to change /correct the phone number on specific person Ex.John in the side bar (Form.html) and the correct place & phone number to be edit in that specific row of my google sheet "Phonelist". The code.gs given below which is not working. Could you lease rectify the same?
function sidebar() {
var html = HtmlService.createHtmlOutputFromFile("Form").setTitle('Phone Details');
SpreadsheetApp.getUi().sidebar(html);
}
function result(form) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ws = ss.getSheetByName("Phonelist");
var data = ws.getDataRange().getValues();
var name = form.name;
var place = form.place;
var phone = form.phone;
for (var i = 1; i < data.length; i++) {
if(data[i][1] == "John"){
var result = [name,place,phone];
ws.getRange(dat[i]).setValue(result);
}
}
}
It is difficult to understand what you exactly need. But there are some issues which are visible.
ws.getRange(data[i])is not valid. See docs. You need a row and a column at least, and in your case also the number of columns since your are inserting a range. Currently you only have a column. The solution is `
const startColumn = 1 // start at column A
const numberOfRows = 1 // update one row at a time
const numberOfColumns = result.length // this will be 3
ws.getRange(data[i], startColumn, numberOfRows, result.length)
.setValues(result) // setValues is correct, setValue is incorrect
The second issue is that you said that NAME is in the first column, but your test is testing against the second column. Array start at 0, i.e. the first item is actual accessed by [0]. therefore your test if(data[i][1] == "John") actually checks if the second column PLACE is equal to "John". To fix this, replace the [1] with [0], so:
if(data[i][0] == "John")
The third issue is handled in the first answer. You are using setValue() which is only to be used to set one cell. But since you are setting a number of cells at one time, you should use setValues() instead.

Clickable checkbox in Qooxdoo table

I'm trying to adapt the Qooxdoo Playground table example's checkbox, to become a checkbox that can be clicked on and off.
I did see some code in a mailing list which seemed like it should do the job, but it's not working for me.
// Display a checkbox in column 3
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());
table.addListener("cellClick",
function(cellEvent) {
var col = cellEvent.getColumn();
if (col == 3) {
oldValue = table.getTableModel().getValue(col, row);
table.getTableModel().setValue(col, cellEvent.getRow(), !value);
}
}
);
I've put that into the Playground at https://preview.tinyurl.com/y8qubmll
My intention is to have a few different checkboxes in the columns, so the code above uses the variable "col" rather than hardcoded values.
Any help would be greatly appreciated.
The event is called cellTap. See the fixed example below.
table.addListener("cellTap",
function(cellEvent) {
var col = cellEvent.getColumn();
var row = cellEvent.getRow();
if (col == 3) {
oldValue = tableModel.getValue(col,row);
tableModel.setValue(col,row, !oldValue);
}
}
);
here is a link to the working example

google apps script: setValues from array, taken from html form onSubmit in google sheets

In Google Sheets, I have a sidebar using html, with a form which runs processForm(this) upon submission. The form was created based on the headings in the sheet, which is why I am using the headings to retrieve the values from the form. The code seems to work fine until I try to use setValues(). There is no error, but nothing seems to happen at that line. Please let me know what I might be doing wrong. Thanks.
function processForm(formObject) {
var headers = getHeaders();
var newRow = [];
for (var i = 0; i < headers.length; i++) {
newRow.push(formObject["" + headers[i]]); // TODO: convert objects to appropriate formats
}
var sheet = SpreadsheetApp.getActiveSheet();
var range = sheet.getRange(parseInt(formObject.row)+1, 1, 1, headers.length)
Logger.log(JSON.stringify(newRow)); // example output: ["John","Smith","male","6615554109","","example_email#yahoo.com"]
range.setValues(newRow); // values not getting set
}
Change last line:
range.setValues([newRow]);
(thanks for the solution, Serge insas!)

AngularJS : Why the data is not displayed in view may I use $scope.apply?

I am getting data from service and display on view using ng-repeat .Actually I am getting event when user scroll to bottom mean when user reached to bottom I will do something.When It reached to bottom I am changing the contend of my array .I am getting the correct contend in ng-repeat array (display array) but it is not reflect on view why ? May I use $scope.apply() or $scope.digest()
Here is my code
http://plnkr.co/edit/XgOxJnPXZk4DneJonlKV?p=preview
Here I am changing the contend of my display array which is not reflect on view
if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {
if(scope.var<scope.arrays.length)
scope.display=[];
var nextvar =++counter;
var increment=counter+1
console.log("nextvar:"+nextvar+"increment:"+increment)
scope.display=scope.arrays[nextvar].concat(scope.arrays[increment]);
console.log(scope.display)
}
As #Claies mentioned you should use apply(). Though the digest() would probably have worked as well.apply() calls digest() internally. He also mentioned that your variable that seems to be storing the page number gets reset to 0 each time you scroll. You should store that in a scope variable outside that handler.
I tried to fix with minimum change
http://plnkr.co/edit/izV3Dd7raviCt4j7C8wu?p=preview
.directive("scrollable", function() {
return function(scope, element, attrs) {
var container = angular.element(element);
container.bind("scroll", function(evt) {
console.log('scroll called'+container[0].scrollTop);
var counter = scope.page;
if (container[0].scrollTop <= 0) {
if (scope.var > 0)
scope.display = scope.arrays[--scope.var].concat(scope.arrays[scope.var+1]);
}
if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {
if (scope.var < scope.arrays.length)
scope.display = [];
var nextvar = ++counter;
var increment = counter + 1
console.log("nextvar:" + nextvar + "increment:" + increment)
scope.display = scope.arrays[nextvar].concat(scope.arrays[increment]);
console.log(scope.display)
scope.page = counter;
}
scope.$apply();
});
};
})
generally I would have implemented this differently. For example by having a spinning wheel on the bottom of the list that when displayed you get the rest of data.
It is difficult to give you a full working plunker. Probably you should have multiple JSON files in the plunker, each containing the data for one page so that we can add the data to the bottom of the display list.
After you modify display array you just have to call scope.$apply() so that it runs the $digest cycle and updates the view. Also you need the initialize scope.var either in your controller or the directive and modify it conditionally.
I dont if this is what you want. I have modified the plunker take a look.
http://plnkr.co/edit/J89VDMQGIXvFnK86JUxx?p=preview

AngularJS e2e Testing with Protractor

I am attemping to get the last row of a ng-repeat(ed) table via protractor to test and ensure the object I just created in a previous test run shows up. I have gotten as far as getting all of the text of the row but cannot seem to figure out through trial and error how to get each column of the last row as part of the array so I can verify each piece and then in the last column I have buttons to click which will be the next step.
The code I have so far is:
var elems = element.all(by.repeater('alert in alerts'));
elems.last().then(function(elm) {
console.log(expect(elm.getText()).toMatch('/testRunner/'));
});
As mentioned above, the expected output/output I want to check against is 'textRunner' and instead I get the entire row of text as such:
testRunner testing the runner 5 minutes No View Edit Enable
EDIT
Here is my final code:
var rows = element.all(by.repeater('alert in alerts'));
rows.last().then(function(row) {
var rowElems = row.findElements(by.tagName('td'));
rowElems.then(function(cols){
expect(cols[0].getText()).toContain('testRunner');
expect(cols[1].getText()).toContain('testing the runner');
expect(cols[4].getText()).toContain('5 minutes');
});
});
var rows = element.all(by.repeater('alert in alerts'));
rows.last().then(function(row) {
var rowElems = row.findElements(by.tagName('td'));
rowElems.then(function(cols){
expect(cols[0].getText()).toContain('testRunner');
expect(cols[1].getText()).toContain('testing the runner');
expect(cols[4].getText()).toContain('5 minutes');
});
});
Assuming your are using a <table>, and your different values are in <td>, you could check values by using the by.tagName locator strategy.
var rows = element.all(by.repeater('alert in alerts'));
var row = rows.last();
var rowElems = row. findElements(by.tagName('td'));
expect(rowElems.get(0).getText()).toMatch('/testRunner/');
expect(rowElems.get(1).getText()).toMatch('/testing/');
expect(rowElems.get(2).getText()).toMatch('/the/');
expect(rowElems.get(3).getText()).toMatch('/runner/');
expect(rowElems.get(4).getText()).toMatch('/5/');
expect(rowElems.get(5).getText()).toMatch('/minutes/');
expect(rowElems.get(6).getText()).toMatch('/No/');
expect(rowElems.get(7).getText()).toMatch('/View/');
expect(rowElems.get(8).getText()).toMatch('/Edit/');
expect(rowElems.get(9).getText()).toMatch('/Enable/');

Resources