Search Posts

Category: html-table

How to implement expandable rows in html with dynamic depth in angularjs

I need to create a table in angularjs where rows can be expanded to the depth until the key “children.contains” has no child ids. I have created the basic example in plunker but I need to generate child rows dynamically. How to do that? Also in my code, For every child row, I need to iterate the whole json array to fetch its children. It is making the loading of table very slow. Is there […]

Repeated data in html table

I am struggling with data-ng-repeat in AngularJS for a bit complex (for a beginner like me) table. Data I have is: $scope.test = [ {store: “NYC store”, comment: “comment1”, prices: { “product1”: “12”, “product2”: “10”, “product3”: “71”} }, {store: “Texas store, comment: “comment2”, prices: { “product1”: “15”, “product2”: “9”, “product3”: “68”} }, ]; And the table should look something like: What I’ve tried: <table style=” border-collapse: collapse;” border=”1″> <tr> <th data-ng-repeat=”data in test”>{{ }}</th> […]

How to remove ng-repeat table row without allowing the table to be empty?

I am trying to delete rows in a table but I do not want it to be completely empty ever… the table starts with one row, but the user can add new rows but also delete all rows, rendering the table empty. This is my code for adding and deleting rows in my controller: $scope.rowItems = [{}]; $scope.addRowItems = function() { $scope.rowItems.push(rowItem); } $scope.deleteRowItem = function(item) { $scope.rowItems.splice(item, 1); } And this is my code […]

How to remove inner padding inside td of a table

I’m implementing a table which has dynamic data. There is a nested table inside the marked area. The problem is if the first td expands then the gap occurs. I searched for this problem and found that this problem is caused by vertical-align. If I could set the height of the nested table to height of the first td then the problem might solve. But data is dynamic so I can’t do that. Can anyone […]

angularjs div’s duplicating. every next button controls a corresponding div

I have such a simplified markup which appends and fills in every next row by surname and name; also by clicking the “List” button I need to fill in additional data about this person in a new popup div and save all information into LocalStorage. The problem is when I click on different “List” buttons appears and hides the same div but the task is: by clicking on different “List” buttons appear and hide different […]

Remove a row on ng-click using angularJs

I have a table with the default empty row(Row further includes a columns with different functionalities).Dynamically a multiple rows can be added by click of a button as per the requirement.i want to remove a row when i click a remove-icon from the same-row(remove-icon included in one of the column). <td class=”text-right”> <a href=”” class=”remove-service” ng-click=”vm.removeService(service,true)”> <img src=”images/delete.png”></a> &ensp;</td> i have a above column to be included in all rows.whenever i click on remove-icon from […]