AngularJs: Required field validation and highlight for dynamic rows of HTML table with contenteditable

Question

I have an HTML table as below:

Answer 1

The thing is the is not working. Try first with just one and see how you can do it for N columns and N rows correctly.

When someone clicks save, you can pass the rows array and add a valid/invalid boolean value inside that object, then use ng-class to highlight that cell or not, depending on the result.

$scope.save = function(rows, columns) {
    rows.forEach(row => {
        if (!row.value || row.value.trim() === '') {
            row.invalid = true;
        } else {
            row.invalid = false;
        }
    })
    alert('please fill table data');
};

I have modified your fiddle with these changes, I hope you can use it.

http://jsfiddle.net/4t85gw1z/